In the layout there are 2 absolutely identical templates for displaying an array, the only difference is in the name (they are also in the script). It is planned to make some more similar templates for storing data of new arrays. Is it possible to make the template in the singular in the layout, and the name of the array would dynamically change depending on the condition of the display of the array (with the help of switch / case unless ... maybe you have some other ideas to implement this

The display of one or another array will be when you click on the button with the name of the array. If one array is displayed, the second and the rest are hidden.

get allMovies(): Array<IMovie> { return this.movies.filter((m) => { const search = this.search.toLowerCase(); const film = m.film.toLowerCase(); return !m.seen && m.year <= +this.rangeYear && film.includes(search); }); } get seenMovies(): Array<IMovie> { return this.movies.filter((n) => { const search = this.search.toLowerCase(); const film = n.film.toLowerCase(); return n.seen && n.year <= +this.rangeYear && film.includes(search); }); } 
  <div class="movieApp"> <h1 >Все фильмы</h1> <div class="movieApp__movieList"> <div *ngFor="let film of allMovies"> <app-movie-card [movie]="film" (onOpenModal)="showMoreInformation($event)"></app-movie-card> </div> </div> <h1>Просмотренные</h1> <div class="movieApp__movieList"> <div *ngFor="let film of seenMovies"> <app-movie-card [movie]="film" (onOpenModal)="showMoreInformation($event)"></app-movie-card> </div> </div> </div>

  • one
    take out h1 and div.movieApp__movieList in a separate component. as input parameters you will transfer the header text and the array for iteration. you will have one block to occupy 1 line of code and look like something like <app-mycomponent [title] = "titleVariable" [arr] = "myArr"> </ app-mycomponent> and then you can even organize an array of objects in ts {title, arr} and display app-mycomponent via ngFor - muturgan

1 answer 1

Why switch-case if your layout is repeated?

I would make it easier:

 <div class="movieApp"> <ng-container *ngTemplateOutlet="movies; context: { $implicit: allMovies, title: 'Все фильмы' }"></ng-container> <ng-container *ngTemplateOutlet="movies; context: { $implicit: seenMovies, title: 'Просмотренные' }"></ng-container> </div> <ng-template #movies let-movies let-title="title"> <h1>{{ title }}</h1> <div class="movieApp__movieList"> <div *ngFor="let movie of movies"> <app-movie-card [movie]="movie" (onOpenModal)="showMoreInformation($event)" ></app-movie-card> </div> </div> </ng-template>

We have taken out all repeating template in ng-template . The ngTemplateOutlet directive ngTemplateOutlet an anchor reference ( ng-template ) ngTemplateOutlet an input parameter. ngTemplateOutletContext is a context that is accessible inside the ng-template and whose properties can be accessed through context variables ( let-* ).

API reference .

  • I am new even in layout in principle. for 2 months of studying I studied all the same about 20 percent of what experienced developers know) they learn from mistakes. It seemed that the switch case is what I need ... Thank you! - nbelle
  • one
    @nbelle yet my advice to you is to spend more time studying JS than Angular, it will be more productive :) - overthesanity