(refactoring) Move *ngFor directives to their own <ng-container> elements. This is mostly a personal preference but it's a good habit to have as you cannot put more than one structural directive on a single element. This way our main repeated element is free of any common structural directives so we can use ours on them if needed.

This commit is contained in:
sercan 2021-05-07 12:10:45 +03:00
parent 7e430a269c
commit 2bea991ba3
11 changed files with 213 additions and 199 deletions

View File

@ -31,14 +31,15 @@
*ngIf="results && !results.length"> *ngIf="results && !results.length">
No results found! No results found!
</mat-option> </mat-option>
<ng-container *ngFor="let result of results">
<mat-option <mat-option
class="group relative h-14 px-6 py-0 sm:px-8 text-md" class="group relative h-14 px-6 py-0 sm:px-8 text-md"
*ngFor="let result of results"
[routerLink]="result.link"> [routerLink]="result.link">
<ng-container <ng-container
[ngTemplateOutlet]="searchResult" [ngTemplateOutlet]="searchResult"
[ngTemplateOutletContext]="{$implicit: result}"></ng-container> [ngTemplateOutletContext]="{$implicit: result}"></ng-container>
</mat-option> </mat-option>
</ng-container>
</mat-autocomplete> </mat-autocomplete>
<button <button
class="absolute top-1/2 right-5 sm:right-7 flex-shrink-0 w-10 h-10 -mt-5" class="absolute top-1/2 right-5 sm:right-7 flex-shrink-0 w-10 h-10 -mt-5"
@ -72,14 +73,15 @@
*ngIf="results && !results.length"> *ngIf="results && !results.length">
No results found! No results found!
</mat-option> </mat-option>
<ng-container *ngFor="let result of results">
<mat-option <mat-option
class="group relative h-14 px-5 py-0 text-md" class="group relative h-14 px-5 py-0 text-md"
*ngFor="let result of results"
[routerLink]="result.link"> [routerLink]="result.link">
<ng-container <ng-container
[ngTemplateOutlet]="searchResult" [ngTemplateOutlet]="searchResult"
[ngTemplateOutletContext]="{$implicit: result}"></ng-container> [ngTemplateOutletContext]="{$implicit: result}"></ng-container>
</mat-option> </mat-option>
</ng-container>
</mat-autocomplete> </mat-autocomplete>
</div> </div>
</ng-container> </ng-container>

View File

@ -319,9 +319,8 @@
[ngClass]="getCalendar(eventForm.get('calendarId').value)?.color"></span> [ngClass]="getCalendar(eventForm.get('calendarId').value)?.color"></span>
<span class="ml-3">{{getCalendar(eventForm.get('calendarId').value)?.title}}</span> <span class="ml-3">{{getCalendar(eventForm.get('calendarId').value)?.title}}</span>
</mat-select-trigger> </mat-select-trigger>
<mat-option <ng-container *ngFor="let calendar of calendars">
*ngFor="let calendar of calendars" <mat-option [value]="calendar.id">
[value]="calendar.id">
<div class="inline-flex items-center"> <div class="inline-flex items-center">
<span <span
class="w-3 h-3 rounded-full" class="w-3 h-3 rounded-full"
@ -329,6 +328,7 @@
<span class="ml-3">{{calendar.title}}</span> <span class="ml-3">{{calendar.title}}</span>
</div> </div>
</mat-option> </mat-option>
</ng-container>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</div> </div>

View File

@ -35,14 +35,15 @@
class="mt-1.5 border-0 space-x-1" class="mt-1.5 border-0 space-x-1"
[formControlName]="'byDay'" [formControlName]="'byDay'"
[multiple]="true"> [multiple]="true">
<ng-container *ngFor="let weekday of weekdays">
<mat-button-toggle <mat-button-toggle
class="w-10 h-10 border-0 rounded-full" class="w-10 h-10 border-0 rounded-full"
*ngFor="let weekday of weekdays"
[disableRipple]="true" [disableRipple]="true"
[value]="weekday.value" [value]="weekday.value"
[matTooltip]="weekday.label"> [matTooltip]="weekday.label">
{{weekday.abbr}} {{weekday.abbr}}
</mat-button-toggle> </mat-button-toggle>
</ng-container>
</mat-button-toggle-group> </mat-button-toggle-group>
</div> </div>

View File

@ -9,9 +9,8 @@
[svgIcon]="'heroicons_solid:plus-circle'" [svgIcon]="'heroicons_solid:plus-circle'"
(click)="addCalendar()"></mat-icon> (click)="addCalendar()"></mat-icon>
</div> </div>
<div <ng-container *ngFor="let calendar of calendars">
class="group flex items-center justify-between mt-2" <div class="group flex items-center justify-between mt-2">
*ngFor="let calendar of calendars">
<div <div
class="flex items-center" class="flex items-center"
(click)="toggleCalendarVisibility(calendar)"> (click)="toggleCalendarVisibility(calendar)">
@ -28,6 +27,7 @@
[svgIcon]="'heroicons_solid:pencil-alt'" [svgIcon]="'heroicons_solid:pencil-alt'"
(click)="openEditPanel(calendar)"></mat-icon> (click)="openEditPanel(calendar)"></mat-icon>
</div> </div>
</ng-container>
<!-- Settings --> <!-- Settings -->
<div class="-mx-4 mt-auto"> <div class="-mx-4 mt-auto">
@ -62,9 +62,9 @@
</mat-select-trigger> </mat-select-trigger>
<div class="px-4 pt-5 text-xl font-semibold">Calendar color</div> <div class="px-4 pt-5 text-xl font-semibold">Calendar color</div>
<div class="flex flex-wrap w-48 my-4 mx-3 -mr-5"> <div class="flex flex-wrap w-48 my-4 mx-3 -mr-5">
<ng-container *ngFor="let color of calendarColors">
<mat-option <mat-option
class="relative flex w-12 h-12 p-0 cursor-pointer rounded-full bg-transparent" class="relative flex w-12 h-12 p-0 cursor-pointer rounded-full bg-transparent"
*ngFor="let color of calendarColors"
[value]="color" [value]="color"
#matOption="matOption"> #matOption="matOption">
<mat-icon <mat-icon
@ -75,6 +75,7 @@
class="flex w-10 h-10 m-1 rounded-full" class="flex w-10 h-10 m-1 rounded-full"
[ngClass]="color"></span> [ngClass]="color"></span>
</mat-option> </mat-option>
</ng-container>
</div> </div>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>

View File

@ -330,8 +330,8 @@
class="flex flex-col max-h-64 py-2 border-t overflow-y-auto"> class="flex flex-col max-h-64 py-2 border-t overflow-y-auto">
<!-- Tags --> <!-- Tags -->
<ng-container *ngIf="!tagsEditMode"> <ng-container *ngIf="!tagsEditMode">
<ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
<div <div
*ngFor="let tag of filteredTags; trackBy: trackByFn"
class="flex items-center h-10 min-h-10 px-4 cursor-pointer hover:bg-hover" class="flex items-center h-10 min-h-10 px-4 cursor-pointer hover:bg-hover"
(click)="toggleContactTag(tag)" (click)="toggleContactTag(tag)"
matRipple> matRipple>
@ -344,12 +344,12 @@
<div class="ml-1">{{tag.title}}</div> <div class="ml-1">{{tag.title}}</div>
</div> </div>
</ng-container> </ng-container>
</ng-container>
<!-- Tags editing --> <!-- Tags editing -->
<ng-container *ngIf="tagsEditMode"> <ng-container *ngIf="tagsEditMode">
<div class="py-2 space-y-2"> <div class="py-2 space-y-2">
<div <ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
class="flex items-center" <div class="flex items-center">
*ngFor="let tag of filteredTags; trackBy: trackByFn">
<mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-full mx-4"> <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-full mx-4">
<input <input
matInput matInput
@ -365,6 +365,7 @@
</button> </button>
</mat-form-field> </mat-form-field>
</div> </div>
</ng-container>
</div> </div>
</ng-container> </ng-container>
<!-- Create tag --> <!-- Create tag -->
@ -496,9 +497,8 @@
<span class="sm:mx-0.5 font-medium text-default">{{getCountryByIso(phoneNumber.get('country').value).code}}</span> <span class="sm:mx-0.5 font-medium text-default">{{getCountryByIso(phoneNumber.get('country').value).code}}</span>
</span> </span>
</mat-select-trigger> </mat-select-trigger>
<mat-option <ng-container *ngFor="let country of countries; trackBy: trackByFn">
*ngFor="let country of countries; trackBy: trackByFn" <mat-option [value]="country.iso">
[value]="country.iso">
<span class="flex items-center"> <span class="flex items-center">
<span <span
class="w-6 h-4 overflow-hidden" class="w-6 h-4 overflow-hidden"
@ -509,6 +509,7 @@
<span class="ml-2 font-medium">{{country.code}}</span> <span class="ml-2 font-medium">{{country.code}}</span>
</span> </span>
</mat-option> </mat-option>
</ng-container>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field class="fuse-mat-no-subscript flex-auto w-full max-w-24 sm:max-w-40 ml-2 sm:ml-4"> <mat-form-field class="fuse-mat-no-subscript flex-auto w-full max-w-24 sm:max-w-40 ml-2 sm:ml-4">

View File

@ -309,31 +309,31 @@
<mat-form-field class="w-1/3 pr-2"> <mat-form-field class="w-1/3 pr-2">
<mat-label>Category</mat-label> <mat-label>Category</mat-label>
<mat-select [formControlName]="'category'"> <mat-select [formControlName]="'category'">
<mat-option <ng-container *ngFor="let category of categories">
*ngFor="let category of categories" <mat-option [value]="category.id">
[value]="category.id">
{{category.name}} {{category.name}}
</mat-option> </mat-option>
</ng-container>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field class="w-1/3 px-2"> <mat-form-field class="w-1/3 px-2">
<mat-label>Brand</mat-label> <mat-label>Brand</mat-label>
<mat-select [formControlName]="'brand'"> <mat-select [formControlName]="'brand'">
<mat-option <ng-container *ngFor="let brand of brands">
*ngFor="let brand of brands" <mat-option [value]="brand.id">
[value]="brand.id">
{{brand.name}} {{brand.name}}
</mat-option> </mat-option>
</ng-container>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field class="w-1/3 pl-2"> <mat-form-field class="w-1/3 pl-2">
<mat-label>Vendor</mat-label> <mat-label>Vendor</mat-label>
<mat-select [formControlName]="'vendor'"> <mat-select [formControlName]="'vendor'">
<mat-option <ng-container *ngFor="let vendor of vendors">
*ngFor="let vendor of vendors" <mat-option [value]="vendor.id">
[value]="vendor.id">
{{vendor.name}} {{vendor.name}}
</mat-option> </mat-option>
</ng-container>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</div> </div>

View File

@ -18,12 +18,14 @@
<ng-container *ngFor="let faqCategory of faqCategories; trackBy: trackByFn"> <ng-container *ngFor="let faqCategory of faqCategories; trackBy: trackByFn">
<div class="mt-12 sm:mt-16 text-3xl font-bold leading-tight tracking-tight">{{faqCategory.title}}</div> <div class="mt-12 sm:mt-16 text-3xl font-bold leading-tight tracking-tight">{{faqCategory.title}}</div>
<mat-accordion class="max-w-4xl mt-8"> <mat-accordion class="max-w-4xl mt-8">
<mat-expansion-panel *ngFor="let faq of faqCategory.faqs; trackBy: trackByFn"> <ng-container *ngFor="let faq of faqCategory.faqs; trackBy: trackByFn">
<mat-expansion-panel>
<mat-expansion-panel-header [collapsedHeight]="'56px'"> <mat-expansion-panel-header [collapsedHeight]="'56px'">
<mat-panel-title class="font-medium leading-tight">{{faq.question}}</mat-panel-title> <mat-panel-title class="font-medium leading-tight">{{faq.question}}</mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
{{faq.answer}} {{faq.answer}}
</mat-expansion-panel> </mat-expansion-panel>
</ng-container>
</mat-accordion> </mat-accordion>
</ng-container> </ng-container>
</div> </div>

View File

@ -93,12 +93,14 @@
<div class="mt-24 text-3xl sm:text-5xl font-extrabold leading-tight tracking-tight text-center">Most frequently asked questions</div> <div class="mt-24 text-3xl sm:text-5xl font-extrabold leading-tight tracking-tight text-center">Most frequently asked questions</div>
<div class="mt-2 text-xl text-center text-secondary">Here are the most frequently asked questions you may check before getting started</div> <div class="mt-2 text-xl text-center text-secondary">Here are the most frequently asked questions you may check before getting started</div>
<mat-accordion class="max-w-4xl mt-12"> <mat-accordion class="max-w-4xl mt-12">
<mat-expansion-panel *ngFor="let faq of faqCategory.faqs; trackBy: trackByFn"> <ng-container *ngFor="let faq of faqCategory.faqs; trackBy: trackByFn">
<mat-expansion-panel>
<mat-expansion-panel-header [collapsedHeight]="'56px'"> <mat-expansion-panel-header [collapsedHeight]="'56px'">
<mat-panel-title>{{faq.question}}</mat-panel-title> <mat-panel-title>{{faq.question}}</mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
{{faq.answer}} {{faq.answer}}
</mat-expansion-panel> </mat-expansion-panel>
</ng-container>
</mat-accordion> </mat-accordion>
</div> </div>
</div> </div>

View File

@ -42,9 +42,9 @@
</mat-select-trigger> </mat-select-trigger>
<div class="px-4 pt-5 text-xl font-semibold">Label color</div> <div class="px-4 pt-5 text-xl font-semibold">Label color</div>
<div class="flex flex-wrap w-48 my-4 mx-3 -mr-5"> <div class="flex flex-wrap w-48 my-4 mx-3 -mr-5">
<ng-container *ngFor="let color of labelColors">
<mat-option <mat-option
class="relative flex w-12 h-12 p-0 cursor-pointer rounded-full bg-transparent" class="relative flex w-12 h-12 p-0 cursor-pointer rounded-full bg-transparent"
*ngFor="let color of labelColors"
[value]="color" [value]="color"
#matOption="matOption"> #matOption="matOption">
<mat-icon <mat-icon
@ -55,6 +55,7 @@
class="flex w-10 h-10 m-1 rounded-full" class="flex w-10 h-10 m-1 rounded-full"
[ngClass]="labelColorDefs[color].bg"></span> [ngClass]="labelColorDefs[color].bg"></span>
</mat-option> </mat-option>
</ng-container>
</div> </div>
</mat-select> </mat-select>
<button <button
@ -90,9 +91,9 @@
</mat-select-trigger> </mat-select-trigger>
<div class="px-4 pt-5 text-xl font-semibold">Label color</div> <div class="px-4 pt-5 text-xl font-semibold">Label color</div>
<div class="flex flex-wrap w-48 my-4 mx-3 -mr-5"> <div class="flex flex-wrap w-48 my-4 mx-3 -mr-5">
<ng-container *ngFor="let color of labelColors">
<mat-option <mat-option
class="relative flex w-12 h-12 p-0 cursor-pointer rounded-full bg-transparent" class="relative flex w-12 h-12 p-0 cursor-pointer rounded-full bg-transparent"
*ngFor="let color of labelColors"
[value]="color" [value]="color"
#matOption="matOption"> #matOption="matOption">
<mat-icon <mat-icon
@ -103,6 +104,7 @@
class="flex w-10 h-10 m-1 rounded-full" class="flex w-10 h-10 m-1 rounded-full"
[ngClass]="labelColorDefs[color].bg"></span> [ngClass]="labelColorDefs[color].bg"></span>
</mat-option> </mat-option>
</ng-container>
</div> </div>
</mat-select> </mat-select>
<button <button

View File

@ -142,8 +142,8 @@
class="flex flex-col max-h-64 py-2 border-t overflow-y-auto"> class="flex flex-col max-h-64 py-2 border-t overflow-y-auto">
<!-- Tags --> <!-- Tags -->
<ng-container *ngIf="!tagsEditMode"> <ng-container *ngIf="!tagsEditMode">
<ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
<div <div
*ngFor="let tag of filteredTags; trackBy: trackByFn"
class="flex items-center h-10 min-h-10 px-4 cursor-pointer hover:bg-hover" class="flex items-center h-10 min-h-10 px-4 cursor-pointer hover:bg-hover"
(click)="toggleTaskTag(tag)" (click)="toggleTaskTag(tag)"
matRipple> matRipple>
@ -155,12 +155,12 @@
<div class="ml-1">{{tag.title}}</div> <div class="ml-1">{{tag.title}}</div>
</div> </div>
</ng-container> </ng-container>
</ng-container>
<!-- Tags editing --> <!-- Tags editing -->
<ng-container *ngIf="tagsEditMode"> <ng-container *ngIf="tagsEditMode">
<div class="py-2 space-y-2"> <div class="py-2 space-y-2">
<div <ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
class="flex items-center" <div class="flex items-center">
*ngFor="let tag of filteredTags; trackBy: trackByFn">
<mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-full mx-4"> <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-full mx-4">
<input <input
matInput matInput
@ -176,6 +176,7 @@
</button> </button>
</mat-form-field> </mat-form-field>
</div> </div>
</ng-container>
</div> </div>
</ng-container> </ng-container>
<!-- Create tag --> <!-- Create tag -->

View File

@ -25,14 +25,16 @@
<div class="font-semibold text-md text-secondary ml-4">{{item.releaseDate}}</div> <div class="font-semibold text-md text-secondary ml-4">{{item.releaseDate}}</div>
</div> </div>
<hr class="mt-6"> <hr class="mt-6">
<div <ng-container *ngFor="let change of item.changes">
class="mt-8" <div class="mt-8">
*ngFor="let change of item.changes">
<span class="inline-flex bg-default rounded px-3 py-1 text-secondary font-bold">{{change.type}}</span> <span class="inline-flex bg-default rounded px-3 py-1 text-secondary font-bold">{{change.type}}</span>
<ul> <ul>
<li *ngFor="let listItem of change.list">{{listItem}}</li> <ng-container *ngFor="let listItem of change.list">
<li>{{listItem}}</li>
</ng-container>
</ul> </ul>
</div> </div>
</ng-container>
</div> </div>
</ng-container> </ng-container>
</div> </div>