Bind html variable to typescript

Question

This is my component:

@Component({
  selector: 'ngx-pages',
  styleUrls: ['pages.component.scss'],
  template: `
    <ngx-one-column-layout>
      <nb-menu [items]="menu"></nb-menu>
      <router-outlet></router-outlet>
    </ngx-one-column-layout>
  `,
})
export class PagesComponent {
  constructor(private translate: TranslateService) {
    console.log(this.translate.instant('adminPanel'));
  }

  menu = MENU_ITEMS;

  ngOnInit(): void {
    MENU_ITEMS[0]["title"]= this.translate.instant('adminPanel');
    this.menu = MENU_ITEMS;
  }
}

Everything works fine, but changing the menu variable when I overwrite it does not change in the html until I exit the page and re-enter, indicating that it was changed late and does not support the change dynamically. I tried to assign an EventEmitter to the nb menu, but can't, since I can't enter the nb-menu to change it from the inside because it's a null-shaped tag (a frame I downloaded it)

Shashank Vivek · Accepted Answer · 2020-04-01 17:18:33Z

1

Try to assign value as

  ngOnInit(): void {
    MENU_ITEMS[0]["title"]= this.translate.instant('adminPanel');
    this.menu = JSON.parse(JSON.stringify(MENU_ITEMS));
  }

For array with objects, angular wont be able to detect changes. So, you need to provide new array as JSON.parse(JSON.stringify(MENU_ITEMS))

answered Apr 1, 2020 at 17:18

Shashank Vivek

17.6k9 gold badges69 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Bind html variable to typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related