数据更改后，工具栏视图也不会改变吗？

Question

This is my sample code: stackblitz demo

Mark-Up:

<div>
  <ejs-toolbar #element>
    <e-items>
      <e-item *ngFor="let item of newarray; let i = index" [text]="item.text" [tooltipText]="item.text">
      </e-item>
    </e-items>
  </ejs-toolbar>
</div>

<div>
  <div style="margin-top: 5px">
    <button style="margin-right: 5px" (click)="run()" type="submit">add</button>
  </div>
</div>

<div>
   <pre>newarray: {{ newarray | json }}</pre>
</div>

TS:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  newarray = [
    { text: "Cut"}
  ]

  run() {
   this.newarray = [
     { text: "Paste" },
    { text: "Underline" },
    { text: "Italic" }]
  }
}

Here I have my toolbar component. it is rendered through *ngfor . If I change it's data the toolbar view is not updated but data is changing.

I don't know, how to solve this?

Please provide suitable solution for this. Thanks

Answer 1

Try something like this:

Use ToolbarComponent

DEMO -----> Solution

TS:

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

import { ToolbarComponent } from '@syncfusion/ej2-ng-navigations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  @ViewChild('element') el: ToolbarComponent;
  newarray: Array<any>;

  ngOnInit() {
    this.newarray = [
      { text: "Cut" },
      { text: "Copy" },
      { text: "Paste" },
      { text: "Underline" },
    ]
  }

  run() {
    let ummy: Array<any> = [
      { text: "Paste" },
      { text: "Underline" },
      { text: "Italic" }]
    this.el.items = ummy
  }
}