How to add the components in Angular7 Projects

[Basheer Ahamed]

Hi Team,

I have few questions related with Angular 7

1. How to add the QR code component,Steppers with Reactive forms and Carousel with custom template.

2. Grid component,How to add the custom template with two or more lines text in single e-column.

3. Is't possible to use the syncfusion component in ionic 4 with angular.

[Madhu Sudhanan P]

Hi Basheer, 

Thanks for contacting Syncfusion support. 

Query: How to add the QR code component,Steppers with Reactive forms and Carousel with custom template. 

Currently we do not have QR code and Carousel components in EJ2, but we have logged a component request on this and it can be tracked through our feedback portal below. 

https://www.syncfusion.com/feedback/3841/ej2-qr-code 

https://www.syncfusion.com/feedback/3842/ej2-carousel 

Please cast your vote to make it count. We will prioritize the features every release based on the demands. 

If you have any more specification/suggestions to the feature request you can add it as a comment in the portal. 

Also we recommend you to share the details of the specification and use case scenarios for “Steppers in Reactive Forms” requirement which will be helpful for us to define the required feature for you in initial release itself.   

Query : Grid component,How to add the custom template with two or more lines text in single e-column. 

 

We have property  allowTextWrap to wrap the cell content of Grid. The auto wrap allows the cell content of the grid to wrap to the next line when it exceeds the boundary of the cell width. 

You can enable allowTextWrap property to achieve your requirement. 

[src/app/tab1.page.html] 

<ejs-grid [dataSource]='data' height='100%' [allowPaging]='true' allowTextWrap='true' [textWrapSettings]='wrapSettings'  [allowSorting]='true' [allowFiltering]='true' 

[filterSettings]='filterSettings' [allowGrouping]='true' > 

  <e-columns> 

    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width='120'></e-column> 

    <e-column field='CustomerID' headerText='Customer ID' width='120'></e-column> 

    . . . . . 

  </e-columns> 

</ejs-grid> 

[src/app/tab1.page.ts] 

import { Component, OnInit } from '@angular/core'; 

import { TextWrapSettingsModel } from '@syncfusion/ej2-angular-grids'; 

 

@Component({ 

  selector: 'app-tab1', 

  templateUrl: 'tab1.page.html', 

  styleUrls: ['tab1.page.scss'] 

}) 

export class Tab1Page implements OnInit { 

  ngOnInit() { 

    this.wrapSettings = { wrapMode: 'Content' }; 

    . . . .  

  } 

} 

If the provided solution does not meet your requirement then share more information or below details it will helpful for us to provide a better solution as soon as possible. 

1.       Do you have multi-line text in data source and want to display the value in Grid. 

2.       Share video or example to show your requirement. 

Query : Is't possible to use the syncfusion component in ionic 4 with angular. 

 

Yes, it’s possible to integrate our Syncfusion Angular components in Ionic 4 with Angular 7 application. We have created a sample for your reference, in the below sample, we have render Grid component. 

Please refer the below code example and help documentation link for more information. 

[package.Json] 

  "dependencies": { 

    "@angular/common": "~7.0.0", 

    . . . . . 

    "@ionic/angular": "4.0.0-rc.0", 

    "@syncfusion/ej2": "^16.4.42", 

    "@syncfusion/ej2-angular-grids": "^16.4.42", 

    "core-js": "^2.5.4", 

    "rxjs": "~6.3.3", 

    "zone.js": "~0.8.26" 

  } 

[src/app/tab1.module.ts] 

import { IonicModule } from '@ionic/angular'; 

. . . . . 

import { GridAllModule } from '@syncfusion/ej2-angular-grids'; 

import { Tab1Page } from './tab1.page'; 

 

@NgModule({ 

  imports: [ 

    IonicModule, 

    CommonModule, 

    GridAllModule, 

    FormsModule, 

    RouterModule.forChild([{ path: '', component: Tab1Page }]) 

  ], 

  declarations: [Tab1Page] 

}) 

export class Tab1PageModule {} 

[global.scss] 

@import '~@ionic/angular/css/padding.css'; 

. . . . 

@import "../node_modules/@syncfusion/ej2/material.css"; 

[src/app/tab1.page.html] 

<ejs-grid [dataSource]='data' height='100%' [allowPaging]='true' allowTextWrap='true' [textWrapSettings]='wrapSettings'  [allowSorting]='true' [allowFiltering]='true' 

[filterSettings]='filterSettings' [allowGrouping]='true' > 

  <e-columns> 

    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width='120'></e-column> 

    <e-column field='CustomerID' headerText='Customer ID' width='120'></e-column> 

    . . . . . 

  </e-columns> 

</ejs-grid> 

[src/app/tab1.page.ts] 

import { Component, OnInit } from '@angular/core'; 

import { TextWrapSettingsModel } from '@syncfusion/ej2-angular-grids'; 

 

@Component({ 

  selector: 'app-tab1', 

  templateUrl: 'tab1.page.html', 

  styleUrls: ['tab1.page.scss'] 

}) 

export class Tab1Page implements OnInit { 

  public data: Object[]; 

  public filterSettings: Object; 

  ngOnInit() { 

    this.filterSettings = { type: 'Menu' }; 

    . . . .  

  } 

} 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/ionic4-angular7-datagrid1268623798  

You can run the above sample by using the below commands. 

• npm install (install the dependent packages)
• ionic serve -l(run the application)

Help documentation : https://ej2.syncfusion.com/angular/documentation/grid/getting-started/  

https://www.syncfusion.com/kb/9685/how-to-get-started-easily-with-syncfusion-angular-7-data-grid  

Reference Link : https://www.djamware.com/post/5be52ce280aca72b942e31bc/ionic-4-angular-7-and-cordova-tutorial-build-crud-mobile-apps#ch1  

Regards, 

Madhu Sudhanan P 

[Mohammd reza]

how to add clendar object and css in ionic 4?

[Deepa Loganathan]

 

Hi Basheer, 

 

 

Please follow the below steps to add EJ2 Calendar component in an Ionic Angular 4 application. 

 

 

Step 1: 

 

Add the calendar package as like below in the package.json file. 

 

 

[Package.json] 

 

 

 

"dependencies": { 

  "@angular/common": "~7.0.0", 

  "@angular/core": "~7.0.0", 

  "@angular/forms": "~7.0.0", 

  "@angular/http": "~7.0.0", 

  "@angular/platform-browser": "~7.0.0", 

  "@angular/platform-browser-dynamic": "~7.0.0", 

  "@angular/router": "~7.0.0", 

  "@ionic-native/core": "5.0.0-beta.21", 

  "@ionic-native/splash-screen": "5.0.0-beta.21", 

  "@ionic-native/status-bar": "5.0.0-beta.21", 

  "@ionic/angular": "4.0.0-rc.0", 

  "@syncfusion/ej2": "^16.4.42", 

  "@syncfusion/ej2-angular-calendars": "^16.4.55", 

  "@syncfusion/ej2-angular-grids": "^16.4.42", 

  "core-js": "^2.5.4", 

  "rxjs": "~6.3.3", 

  "zone.js": "~0.8.26" 

  }, 

 

 

Step 2: 

 

 

Import the calendar module in the app.module.ts file. 

 

 

[src/app/tab2/tab2.module.ts] 

 

 

import { IonicModule } from '@ionic/angular'; 

import { RouterModule } from '@angular/router'; 

import { NgModule } from '@angular/core'; 

import { CommonModule } from '@angular/common'; 

import { FormsModule } from '@angular/forms'; 

import { Tab2Page } from './tab2.page'; 

 

// Syncfusion ej2-angular-calendars module 

import { CalendarModule } from '@syncfusion/ej2-angular-calendars'; 

 

@NgModule({ 

imports: [ 

IonicModule, 

CommonModule, 

FormsModule, 

CalendarModule, // declaration of ej2-angular-calendars module into NgModule 

RouterModule.forChild([ 

{ path: '', component: Tab2Page } 

]) 

], 

declarations: [Tab2Page] 

}) 

export class Tab2PageModule {} 

 

 

 

 

Step 3: 

 

 

Define the CSS reference to render the calendar component. 

 

 

[global.scss] 

 

 

@import "../node_modules/@syncfusion/ej2/material.css"; 

 

 

 

 

Step 5: 

 

 

Add the code to render the Calendar component in your app.component.html file 

 

 

[src/app/tab2/tab2.component.html] 

 

 

<div id="app"> 

<ejs-calendar [value]='dateValue' [min]='minDate' [max]='maxDate'></ejs-calendar> 

</div> 

 

 

 

 

Step 6: 

 

 

Add the required code for bind the values to the component in the app.component.ts file. 

 

 

[src/app/tab2/tab2.component.ts] 

 

 

import 

{ Component } from '@angular/core'; 

@Component( 

{ selector: 'app-tab2', templateUrl: 'tab2.page.html', styleUrls: ['tab2.page.scss'] } 

) 

export class Tab2Page { 

public dateValue: Date = new Date('05/11/2017'); 

public minDate: Date = new Date('05/09/2017'); 

public maxDate: Date = new Date('05/15/2017'); 

} 

 

 

 

 

Please find the sample link from below. 

 

 

Sample Link: http://www.syncfusion.com/downloads/support/forum/141584/ze/ionic4-angular7-Grid_calendar1163836093 

 

 

You can run the above sample by using the below commands.  

• npm install (install the dependent packages)
• ionic serve -l (run the application) 

 

 

To know more about Calendar, please refer the below UG documentation link. 

 

 

UG Link: https://ej2.syncfusion.com/angular/documentation/calendar/getting-started/?no-cache=1#getting-started 

 

 

Regards, 

Deepa L.