diff --git a/ej2-angular/dialog/getting-started.md b/ej2-angular/dialog/getting-started.md index c296df3b28..4d5133589c 100644 --- a/ej2-angular/dialog/getting-started.md +++ b/ej2-angular/dialog/getting-started.md @@ -101,51 +101,20 @@ To mention the ngcc package in the `package.json` file, add the suffix `-ngcc` w >Note: If the ngcc tag is not specified while installing the package, the Ivy Library Package will be installed and this package will throw a warning. -## Adding Dialog module - -Once you have successfully installed the popups package, the component modules are ready to configure in your application from the installed location. Syncfusion Angular package provides two different types of ngModules. - -Refer to [Ng-Module](https://ej2.syncfusion.com/angular/documentation/common/ng-module/) to learn about `ngModules`. - -Refer to the following snippet to import the `DialogModule` in `app.module.ts` from the `@syncfusion/ej2-angular-popups`. - -```javascript -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; - -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; -// Imported syncfusion DialogModule from popups package -import { DialogModule } from '@syncfusion/ej2-angular-popups'; - -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - AppRoutingModule, - // Registering EJ2 Dialog Module - DialogModule - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } - -``` - ## Adding Dialog component Add the Dialog component snippet in `app.component.ts` as follows. ```javascript -import { Component, ViewChild, OnInit, ElementRef } from '@angular/core'; -import { DialogComponent } from '@syncfusion/ej2-angular-popups'; -import { EmitType } from '@syncfusion/ej2-base'; +import { DialogModule } from '@syncfusion/ej2-angular-popups' +import { Component, ViewChild } from '@angular/core'; @Component({ +imports: [ + DialogModule + ], + standalone: true, selector: 'app-root', template: `
@@ -156,11 +125,11 @@ import { EmitType } from '@syncfusion/ej2-base';
` }) -export class AppComponent implements OnInit { +export class AppComponent { // Create element reference for dialog target element. - @ViewChild('ejDialog') ejDialog: DialogComponent; - - public onOpenDialog = function(event: any): void { + @ViewChild('ejDialog') ejDialog: any; + + public onOpenDialog = (event: any): void => { // Call the show method to open the Dialog this.ejDialog.show(); }; diff --git a/ej2-angular/multi-select/virtual-scroll.md b/ej2-angular/multi-select/virtual-scroll.md index 51a355ac04..517415226e 100644 --- a/ej2-angular/multi-select/virtual-scroll.md +++ b/ej2-angular/multi-select/virtual-scroll.md @@ -41,7 +41,7 @@ In the following example, `id` column and `text` column from complex data have b ## Binding remote data -The MultiSelect supports the retrieval of data from remote data services with the help of the `DataManager` component, triggering the `actionBegin` and `actionComplete` events, and then updating the list data. During virtual scrolling, additional data is retrieved from the server, triggering the `actionBegin` and `actionComplete` events at that time as well. +The MultiSelect supports the retrieval of data from remote data services with the help of the `DataManager` component, triggering the `actionBegin` and `actionComplete` events, and then updating the list data. During virtual scrolling, additional data is retrieved from the server, triggering the `actionBegin` and `actionComplete` events at that time as well. The following sample displays the OrderId from the `Orders` Data Service. @@ -184,4 +184,4 @@ The following sample shows the example for Preselect value with Virtualization. {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/samples/multiselect/virtual-scroll-preselect" %} \ No newline at end of file +{% previewsample "page.domainurl/samples/multiselect/virtual-scroll-preselect" %} diff --git a/ej2-angular/multicolumn-combobox/getting-started.md b/ej2-angular/multicolumn-combobox/getting-started.md index d071461a95..111291c871 100644 --- a/ej2-angular/multicolumn-combobox/getting-started.md +++ b/ej2-angular/multicolumn-combobox/getting-started.md @@ -94,26 +94,6 @@ To mention the ngcc package in the `package.json` file, add the suffix `-ngcc` w >Note: If the ngcc tag is not specified while installing the package, the Ivy Library Package will be installed and this package will throw a warning. -## Registering MultiColumn ComboBox module - -Import MultiColumn ComboBox module into Angular application(app.module.ts) from the package `@syncfusion/ej2-angular-multicolumn-combobox`. - -```javascript -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -// import the MultiColumn ComboBoxModule for the MultiColumn ComboBox component -import { MultiColumnComboBoxModule } from '@syncfusion/ej2-angular-multicolumn-combobox'; -import { AppComponent } from './app.component'; - -@NgModule({ - //declaration of ej2-angular-multicolumn-combobox module into NgModule - imports: [ BrowserModule, MultiColumnComboBoxModule ], - declarations: [ AppComponent ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } -``` - ## Adding CSS reference The following CSS files are available in `../node_modules/@syncfusion` package folder. @@ -131,15 +111,21 @@ This can be referenced in [src/styles.css] using following code. Modify the template in [src/app/app.component.ts] file to render the Angular ComboBox component. Add the Angular MultiColumn ComboBox by using `` selector in `template` section of the app.component.ts file. ```javascript + +import { FormsModule, ReactiveFormsModule } from '@angular/forms' +import { MultiColumnComboBoxModule } from '@syncfusion/ej2-angular-multicolumn-combobox' +import { ButtonModule } from '@syncfusion/ej2-angular-buttons' import { Component } from '@angular/core'; -import { MultiColumnComboBoxComponent } from '@syncfusion/ej2-angular-multicolumn-combobox'; @Component({ - selector: 'app-root', - // specifies the template string for the MultiColumn ComboBox component - template: `` + imports: [ FormsModule, ReactiveFormsModule, MultiColumnComboBoxModule, ButtonModule ], + standalone: true, + selector: 'app-root', + // specifies the template string for the MultiColumn ComboBox component + template: `` }) export class AppComponent { } + ``` ## Binding data source with fields and columns @@ -147,10 +133,15 @@ export class AppComponent { } After initializing, populate the MultiColumn ComboBox with data by using the [dataSource](https://ej2.syncfusion.com/angular/documentation/api/multicolumn-combobox#datasource) property, to map the data for each specified columns use the `` selector and the [fields](https://ej2.syncfusion.com/angular/documentation/api/multicolumn-combobox#fields) property to map the data fields from the dataSource. ```typescript -import { Component } from '@angular/core'; -import { MultiColumnComboBoxComponent } from '@syncfusion/ej2-angular-multicolumn-combobox'; + +import { FormsModule, ReactiveFormsModule } from '@angular/forms' +import { MultiColumnComboBoxModule } from '@syncfusion/ej2-angular-multicolumn-combobox' +import { ButtonModule } from '@syncfusion/ej2-angular-buttons' +import { Component, HostListener, ViewChild } from '@angular/core'; @Component({ + imports: [ FormsModule, ReactiveFormsModule, MultiColumnComboBoxModule, ButtonModule ], + standalone: true, selector: 'app-root', // specifies the template string for the MultiColumn ComboBox component template: ` @@ -180,6 +171,7 @@ export class AppComponent { // maps the appropriate column to fields property public fields: Object = { text: 'Name', value: 'EmpID' }; } + ``` ## Running the application @@ -222,4 +214,4 @@ In the following sample, popup list's width and height are configured. {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/samples/multicolumn-combobox/getting-started-cs2" %} \ No newline at end of file +{% previewsample "page.domainurl/samples/multicolumn-combobox/getting-started-cs2" %}