Skip to content

Commit

Permalink
Migrate to the new contol flow (@if and @for)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cristofima
cristofima committed Mar 2, 2024
1 parent d370545 commit 738c022
Show file tree
Hide file tree
Showing 12 changed files with 513 additions and 404 deletions.
24 changes: 13 additions & 11 deletions src/app/app.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@
<div class="container-fluid">
<a class="navbar-brand" routerLink="/">&nbsp;&nbsp;Movies Db</a>
<button
class="navbar-toggler"
type="button"
aria-controls="navbarContent"
[attr.aria-expanded]="!collapsed"
aria-label="Toggle navigation"
(click)="collapsed = !collapsed"
>
<span class="navbar-toggler-icon"></span>
</button>
class="navbar-toggler"
type="button"
aria-controls="navbarContent"
[attr.aria-expanded]="!collapsed"
aria-label="Toggle navigation"
(click)="collapsed = !collapsed"
>
<span class="navbar-toggler-icon"></span>
</button>

<div class="navbar-collapse" [class.collapse]="collapsed" id="navbarContent">
<ul class="navbar-nav me-auto">
Expand All @@ -28,13 +28,15 @@
<li class="nav-item">
<select class="form-select" aria-label="Default language" (change)="onLanguageChange($event.target.value)">
<option value="">{{ 'SelectDefaultLanguage' | translate }}</option>
<option *ngFor="let lang of laguages" [value]="lang.code" [selected]="lang.code === selectedLanguage">{{lang.name | translate}}</option>
@for (lang of laguages; track lang) {
<option [value]="lang.code" [selected]="lang.code === selectedLanguage">{{lang.name | translate}}</option>
}
</select>
</li>
</ul>
</div>
</div>

</nav>

<router-outlet></router-outlet>
40 changes: 25 additions & 15 deletions src/app/features/home/components/home.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,11 @@ <h3>{{ 'Trending' | translate }}</h3>
<ng-template ngbNavContent>
<div class="row">
<div class="media-container">
<div *ngFor="let media of trendingMediaToday" class="card">
<app-media-poster [media]="media" sizeformat="small"></app-media-poster>
</div>
@for (media of trendingMediaToday; track media) {
<div class="card">
<app-media-poster [media]="media" sizeformat="small"></app-media-poster>
</div>
}
</div>
</div>
</ng-template>
Expand All @@ -18,9 +20,11 @@ <h3>{{ 'Trending' | translate }}</h3>
<ng-template ngbNavContent>
<div class="row">
<div class="media-container">
<div *ngFor="let media of trendingMediaThisWeek" class="card">
<app-media-poster [media]="media" sizeformat="small"></app-media-poster>
</div>
@for (media of trendingMediaThisWeek; track media) {
<div class="card">
<app-media-poster [media]="media" sizeformat="small"></app-media-poster>
</div>
}
</div>
</div>
</ng-template>
Expand All @@ -38,9 +42,11 @@ <h3>{{ 'What\'s Popular' | translate }}</h3>
<ng-template ngbNavContent>
<div class="row">
<div class="media-container">
<div *ngFor="let media of popularStreaming" class="card">
<app-media-poster [media]="media" sizeformat="small"></app-media-poster>
</div>
@for (media of popularStreaming; track media) {
<div class="card">
<app-media-poster [media]="media" sizeformat="small"></app-media-poster>
</div>
}
</div>
</div>
</ng-template>
Expand All @@ -50,9 +56,11 @@ <h3>{{ 'What\'s Popular' | translate }}</h3>
<ng-template ngbNavContent>
<div class="row">
<div class="media-container">
<div *ngFor="let media of popularOnTV" class="card">
<app-media-poster [media]="media" sizeformat="small"></app-media-poster>
</div>
@for (media of popularOnTV; track media) {
<div class="card">
<app-media-poster [media]="media" sizeformat="small"></app-media-poster>
</div>
}
</div>
</div>
</ng-template>
Expand All @@ -62,9 +70,11 @@ <h3>{{ 'What\'s Popular' | translate }}</h3>
<ng-template ngbNavContent>
<div class="row">
<div class="media-container">
<div *ngFor="let media of popularInTheaters" class="card">
<app-media-poster [media]="media" sizeformat="small"></app-media-poster>
</div>
@for (media of popularInTheaters; track media) {
<div class="card">
<app-media-poster [media]="media" sizeformat="small"></app-media-poster>
</div>
}
</div>
</div>
</ng-template>
Expand Down
20 changes: 12 additions & 8 deletions src/app/features/movie/components/collection/collection.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,13 @@
<ng-template #mainInfo let-collection="data">
<h3>{{collection.name}}</h3>

<div class="user-score-container" *ngIf="collection.voteAverage > 0">
<circle-progress [percent]="collection.voteAverage * 10" [outerStrokeColor]="collection.voteAverage | borderClass"
@if (collection.voteAverage > 0) {
<div class="user-score-container">
<circle-progress [percent]="collection.voteAverage * 10" [outerStrokeColor]="collection.voteAverage | borderClass"
[titleFontSize]="20" [unitsFontSize]="15" [radius]="27" [outerStrokeWidth]="5"></circle-progress>
<h6 [innerHTML]="'User Score' | translate"></h6>
</div>
<h6 [innerHTML]="'User Score' | translate"></h6>
</div>
}

<h5>{{ 'Overview' | translate }}</h5>
<p>{{collection.overview}}</p>
Expand All @@ -18,11 +20,13 @@ <h5>{{ 'Overview' | translate }}</h5>
<div class="row">
<h3 style="width: 100%;">{{ 'Movies' | translate }}</h3>

<div *ngFor="let movie of collection.movies" class="col-lg-2 col-sm-6 mb-4">
<div class="card h-100">
<app-media-poster [media]="movie" sizeformat="medium"></app-media-poster>
@for (movie of collection.movies; track movie) {
<div class="col-lg-2 col-sm-6 mb-4">
<div class="card h-100">
<app-media-poster [media]="movie" sizeformat="medium"></app-media-poster>
</div>
</div>
</div>
}
</div>
</ng-template>
</app-generic-details>
Loading

0 comments on commit 738c022

Please sign in to comment.