Accordion Control In Angular 5 CLI Application3

[Jeffrey Stone]

I roughly followed the basic instructions to create use the accordion control from: https://ej2.syncfusion.com/16.1.32/angular/documentation/accordion/getting-started.html#dependencies

Unfortunately, it is not rendering correctly. Here is what is looks like in my browser:

Some of the differences were I did a "ng new new-app" instead of cloning the quickstart project from GitHub.  And, I put the template into the app.component.html vs putting it in the app.component.ts

Here are some of the key files:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AccordionComponent, AccordionItemDirective, AccordionItemsDirective } from '@syncfusion/ej2-ng-navigations';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    AccordionComponent, AccordionItemDirective, AccordionItemsDirective
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<ejs-accordion>
  <e-accordionitems>
    <e-accordionitem expanded='true' header='ASP.NET' content='Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services.'></e-accordionitem>
    <e-accordionitem header='ASP.NET MVC' content='The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller.'></e-accordionitem>
    <e-accordionitem header='JavaScript' content='JavaScript (JS) is an interpreted computer programming language.It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.'></e-accordionitem>
  </e-accordionitems>
</ejs-accordion>

app.component.css

@import "../../node_modules/@syncfusion/ej2-ng-navigations/styles/material.css";

angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "new-app"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

package.json

{
  "name": "new-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "@syncfusion/ej2-ng-navigations": "^16.1.32",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.3",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}

I also have attached a zip containing the files - I had to remove the node_modules folder as that was 330 MB.

Any ideas on why this may be happening?

Regards, Jeff

Attachment: Accordion_V2_e5edc846.zip

[Arun Palaniyandi]

Hi Jeff, 

  

Thanks for contacting Syncfusion support. 

  

  

We have checked your shared sample and hence we can able to replicate your mentioned issue. After validating found that this issue is occurred because the styles didn’t refer correctly. In order to overcome this issue we suggest you to refer the style in the style reference section of angular-cli.json (i.e in style.css). Please find the below code snippets. 

  

  

angular-cli.json 

  

{ 

  "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 

  "project": { 

    "name": "new-app" 

  }, 

  "apps": [ 

    { 

      "root": "src", 

      "outDir": "dist", 

      "assets": [ 

        "assets", 

        "favicon.ico" 

      ], 

      "index": "index.html", 

     "main": "main.ts", 

      "polyfills": "polyfills.ts", 

      "test": "test.ts", 

      "tsconfig": "tsconfig.app.json", 

      "testTsconfig": "tsconfig.spec.json", 

      "prefix": "app", 

      "styles": [ 

        "styles.css" // refer in the style.css globally 

      ], 

      "scripts": [], 

  

} 

  

  

Styles.css 

  

@import "../node_modules/@syncfusion/ej2-ng-navigations/styles/material.css";   // refer here 

  

  

  

  

  

Please find the below getting started UG for more reference. 

  

https://ej2.syncfusion.com/16.1.32/angular/documentation/getting-started/Angular-CLI.html 

  

  

Please find the modified sample below for your reference. 

  

http://www.syncfusion.com/downloads/support/forum/136779/ze/Accordion_V21249174287 

  

  

 Hence we will include this in our documentation soon and please let us know if you need any further assistance. 

       

  

Regards, 

Arun P. 

[Jeffrey Stone]

Arun,

Thank you for the quick reply! Adding the css file to the styles.css worked.

I do have one more question regarding the accordion. Is it possible to use another angular component as the content for an accordionitem? I have tried it and I don't see the component.

<e-accordionitem expanded='true' header='ASP.NET' content='<app-ticks></app-ticks>'></e-accordionitem>

Regards, Jeff

[Arun Palaniyandi]

Hi Jeff, 

 

Thanks for update. 

 

Yes, it is possible to use another angular component as the content for an Accordionitem. This can be achieved by using ng-template for each e-accordionitem tag with #content attribute and this through this content we can render other component as content to Accordion Item. Please find the below code snippets for rendering Treeview, Toolbar, tab as content for Accordionitem . 

 

 

app.component.html 

 

<ejs-accordion> 

  <e-accordionitems> 

    <e-accordionitem header='Toolbar' [content] ='content1'> 

    </e-accordionitem> 

    <e-accordionitem header='Treeview' [content] ='content2'> 

    </e-accordionitem> 

    <e-accordionitem header='Tab' [content] ='content3'> 

    </e-accordionitem> 

  </e-accordionitems> 

</ejs-accordion> 

 

<ng-template #content1 let-data> 

    <ejs-toolbar> 

        <e-items> 

           <e-item text='Cut'></e-item> 

           <e-item text='Copy'></e-item> 

           <e-item text='Paste'></e-item> 

           <e-item type='Separator'></e-item> 

           <e-item text='Bold'></e-item> 

           <e-item text='Italic'></e-item> 

           <e-item text='Underline'></e-item> 

        </e-items> 

      </ejs-toolbar> 

</ng-template> 

 

<ng-template #content2 let-data> 

   <ejs-treeview id='treeelement' [fields]='field'></ejs-treeview> 

</ng-template> 

 

<ng-template #content3 let-data> 

    <ejs-tab id="element"> 

            <e-tabitems> 

                <e-tabitem [header]='headerText[0]' [content]="contentTab1"></e-tabitem> 

                <e-tabitem [header]='headerText[1]' [content]="contentTab2"></e-tabitem> 

                <e-tabitem [header]='headerText[2]' [content]="contentTab3"></e-tabitem> 

            </e-tabitems> 

        </ejs-tab> 

</ng-template> 

 

 

App.component.ts 

 

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

. 

. 

. 

 

@Component({ 

  selector: 'app-root', 

  templateUrl: './app.component.html', 

  styleUrls: ['./app.component.css'] 

}) 

export class AppComponent { 

  title = 'app'; 

 

@ViewChild('content') content: TemplateRef<any>;  // refer templateref for content 

 

//use code for other components here 

} 

 

 

Please find the modified sample below for your reference. 

 

http://www.syncfusion.com/downloads/support/directtrac/136779/ze/new-appcli-1447181281 

 

 

We will documented this content in our Accordion how to section and this UG will be published in our upcoming Volume1 SP2 release. 

 

 

Please let us know if you need any further assistance. 

       

Regards,
Arun P.