How do I use ngFor correctly?

user_19739426 0
Viewed 41

Please help!!!

Here's the situation:

I got 4 tabs, the first one is 'ALL', and the others are 3 child app. Basically, in 'ALL' tab, it's showing all notifications, and in other 3 tabs, it's showing notification from different child apps.

Now, I'm implementing checkbox and read more functionality, in HTML file I'm using *ngFor to loop through the notifications, problem is whatever I do to the certain index in one of the tabs, it will automatically apply to the same index in other tabs.

I know it's something wrong with index, but I can't figure out where.. please help.

angular
1 Answers

If you need to manage and create mat-tabs dynamically, You should use mat-tab-nav-bar instead:

Template:

<nav mat-tab-nav-bar [backgroundColor]="myColor">
  <a mat-tab-link *ngFor="let link of links; index as i"
     [href]="link"
     (click)="activeLink = link"
     [active]="activeLink == link"> {{titles[i]}} </a>
</nav>

Ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  ngOnInit() {
  }
  links = ['#100', '#101', '#102'];
  titles = ['Tab A', 'Tab B', 'Tab C'];
  activeLink = this.links[1];
  myColor = 'primary';
}

The mat-tab-nav-bar is the selector of MatTabNav directive. The mat-tab-link is the selector of MatTabLink directive.

mat-tab-nav-bar: It is used for anchored navigation with animated ink bar. It has the properties such as 'backgroundColor', 'color', 'disablePagination', 'disableRipple'. The 'disablePagination', 'disableRipple' are Boolean.

mat-tab-link: It is used for a link inside mat-tab-nav-bar. It has Boolean properties such as 'active', 'disableRipple', 'disabled'.

More Info StackBlitz

user_21263550
Related