1. Home
  2. Forum
  3. Angular - EJ 2
  4. How to add the components in Angular7 Projects

How to add the components in Angular7 Projects

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.

3 Replies
MS Madhu Sudhanan P Syncfusion Team December 21, 2018 12:04 PM UTC

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. 



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'; 
. . . . 


[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' }; 
    . . . .  
  } 
} 


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

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




Regards, 
Madhu Sudhanan P 


MR Mohammd reza March 17, 2019 06:03 AM UTC

how to add clendar object and css in ionic 4?

DL Deepa Loganathan Syncfusion Team March 18, 2019 11:50 AM UTC

 
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. 
 
 
 
 
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. 
 
 
 
 
Regards, 

Deepa L. 


Loader.
Up arrow icon