Angular 4 MaterialiseCSS ngfor et onglets

Question

J'essaie de faire des onglets dynamiques. Donc, j'utilise matérialiser CSS pour créer cela dans mon Angular 4 App, je n'arrive pas à le faire fonctionner. J'essayez ceci:

<div> 
     <ul class="tabs tabs-fixed-width"> 
     <div class="indicator" style="z-index:1; background-color: #1ABFB4 !important;"></div> 
     <li *ngFor="let entry of data" class="tab"><a href="#{{entry.code}}">{{entry.code}}</a></li> 
     </ul> 
    </div> 
    <div *ngFor="let item of data" id="{{item.code}}" class="col s12">{{item.description}}</div> 
    </div> 

Cela crée correctement les onglets, mais ils ne répondent pas avec une page et chaque onglet a tous les divs, quand j'ai 4 onglets, je reçois 4 descriptions sous chaque onglet. Comment puis-je faire des onglets avec ngFor?

Answer 1

// faire un emballage comme ci-dessous

import { 
    Component, 
    ElementRef, 
    AfterViewInit, 
    NgZone, 
    Input, 
    Output 
} from '@angular/core'; 

declare var $: any; 

@Component({ 

    selector: 'tabs', 

    styles: [` 
     .carousel .carousel-item { 
      display: block; width: 200px; height:200px; 
      position: relative; top: 0; left: 0; 
     } 
    `], 

template: `<ng-content></ng-content>` 
}) 

export class MyTabsComponent implements AfterViewInit { 

$tabs: any; 
@Output() onShow: EventEmitter<any> = new EventEmitter(); 
@Input() swipeable = false; 

constructor(private el: ElementRef, private zone: NgZone) { } 

ngAfterViewInit() { 
    this.zone 
     .runOutsideAngular(() => { 

      this.$tabs = $(this.el.nativeElement); 
      this.$tabs.find('ul.tabs') 
       .on('click', 'a', ((tab) => { 
        this.zone.run(() => { // detect change and use 
         this.onShow.emit({ tab, tabRef: this.$tabs }); 
        }); 
       }).bind(this)) 
       .tabs({// initialize your tabs outside angular 
        'responsiveThreshold': 1920, 
        'swipeable': this.swipeable 

       }); 

     }); 
    } 
} 

// utiliser le composant d'emballage et de fournir les données

@Component({ 

select: 'app-root', 

template: ` 

<tabs (onShow)="onTabOpen($event)> 
    <div> 
     <ul class="tabs tabs-fixed-width"> 
      <div class="indicator" style="z-index:1; background-color: 
       #1ABFB4 !important;"></div> 
      <li *ngFor="let entry of data" class="tab"><a [attr.href]="'#'+ 
       entry.code">{{entry.code}}</a></li> 
     </ul> 
    </div> 
</tabs> 

<div *ngFor="let item of data" [attr.id]="item.code" class="col s12"> 
    {{item.description}}</div> 
` 
}) 
class AppComponent { 
    data: [ 
     { 
      code: 'first', 
      description: 'I am first tab' 
     }, 
     { 
      code: 'second', 
      description: 'I am second tab' 
     } 
    ] 

    onTabOpen(event:any) { 
    // do some stuff 
    } 
} 

Il travaille pour moi espère que cela fonctionne aussi bien pour vous!