Skip to content

Commit 9e51a4f

Browse files
xidedixxidedix
committed
refactor: use control flow
1 parent 83f5f8e commit 9e51a4f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+310
-274
lines changed

‎projects/coreui-angular/src/lib/alert/alert.component.html

+6-7
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
<ng-container *ngIf="visible || !hide">
2-
<ng-template [ngIf]="dismissible">
3-
<ng-container *ngTemplateOutlet="templates?.alertButtonCloseTemplate || defaultAlertButtonCloseTemplate">
4-
</ng-container>
5-
</ng-template>
6-
<ng-content></ng-content>
7-
</ng-container>
1+
@if (visible || !hide) {
2+
@if (dismissible) {
3+
<ng-container *ngTemplateOutlet="templates?.alertButtonCloseTemplate || defaultAlertButtonCloseTemplate" />
4+
}
5+
<ng-content />
6+
}
87

98
<ng-template #defaultAlertButtonCloseTemplate>
109
<button (click)="visible=false" aria-label="Close" cButtonClose></button>

‎projects/coreui-angular/src/lib/alert/alert.component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
Output,
1010
QueryList
1111
} from '@angular/core';
12-
import { NgIf, NgTemplateOutlet } from '@angular/common';
12+
import { NgTemplateOutlet } from '@angular/common';
1313
import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';
1414
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
1515

@@ -25,7 +25,7 @@ type AnimateType = ('hide' | 'show');
2525
styleUrls: ['./alert.component.scss'],
2626
exportAs: 'cAlert',
2727
standalone: true,
28-
imports: [NgIf, NgTemplateOutlet, ButtonCloseDirective],
28+
imports: [NgTemplateOutlet, ButtonCloseDirective],
2929
animations: [
3030
trigger('fadeInOut', [
3131
state('show', style({ opacity: 1, height: '*', padding: '*', border: '*', margin: '*' })),

‎projects/coreui-angular/src/lib/avatar/avatar.component.html

+9-6
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
<ng-container>
2-
<ng-container *ngTemplateOutlet="defaultImageTemplate"></ng-container>
3-
<span *ngIf="!!status" [ngClass]="statusClass"></span>
2+
<ng-container *ngTemplateOutlet="defaultImageTemplate" />
3+
@if (!!status) {
4+
<span [ngClass]="statusClass"></span>
5+
}
46
</ng-container>
57

68
<ng-template #defaultImageTemplate>
7-
<img *ngIf="!!src; else imageContent" [src]="src" class="avatar-img" />
8-
<ng-template #imageContent>
9-
<ng-content></ng-content>
10-
</ng-template>
9+
@if (!!src) {
10+
<img [src]="src" class="avatar-img" />
11+
} @else {
12+
<ng-content />
13+
}
1114
</ng-template>

‎projects/coreui-angular/src/lib/avatar/avatar.component.ts

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, HostBinding, Input } from '@angular/core';
2-
import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
2+
import { NgClass, NgTemplateOutlet } from '@angular/common';
33

44
import { Colors, Shapes, Sizes, TextColors } from '../coreui.types';
55

@@ -9,8 +9,7 @@ import { Colors, Shapes, Sizes, TextColors } from '../coreui.types';
99
standalone: true,
1010
imports: [
1111
NgTemplateOutlet,
12-
NgClass,
13-
NgIf
12+
NgClass
1413
]
1514
})
1615
export class AvatarComponent {

‎projects/coreui-angular/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.component.html

+18-19
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
1-
<a *ngIf="!active; else activeItem"
2-
[routerLink]="url"
3-
[cHtmlAttr]="attributes ?? {}"
4-
[target]="attributes?.['target']"
5-
[queryParams]="linkProps?.queryParams ?? null"
6-
[fragment]="linkProps?.fragment"
7-
[queryParamsHandling]="linkProps?.queryParamsHandling ?? null"
8-
[preserveFragment]="linkProps?.preserveFragment ?? false"
9-
[skipLocationChange]="linkProps?.skipLocationChange ?? false"
10-
[replaceUrl]="linkProps?.replaceUrl ?? false"
11-
[state]="linkProps?.state ?? {}"
12-
>
13-
<ng-container *ngTemplateOutlet="defaultBreadcrumbItemContentTemplate"></ng-container>
14-
</a>
15-
16-
<ng-template #activeItem>
1+
@if (!active) {
2+
<a [routerLink]="url"
3+
[cHtmlAttr]="attributes ?? {}"
4+
[target]="attributes?.['target']"
5+
[queryParams]="linkProps?.queryParams ?? null"
6+
[fragment]="linkProps?.fragment"
7+
[queryParamsHandling]="linkProps?.queryParamsHandling ?? null"
8+
[preserveFragment]="linkProps?.preserveFragment ?? false"
9+
[skipLocationChange]="linkProps?.skipLocationChange ?? false"
10+
[replaceUrl]="linkProps?.replaceUrl ?? false"
11+
[state]="linkProps?.state ?? {}"
12+
>
13+
<ng-container *ngTemplateOutlet="defaultBreadcrumbItemContentTemplate" />
14+
</a>
15+
} @else {
1716
<span [cHtmlAttr]="attributes ?? {}">
18-
<ng-container *ngTemplateOutlet="defaultBreadcrumbItemContentTemplate"></ng-container>
17+
<ng-container *ngTemplateOutlet="defaultBreadcrumbItemContentTemplate" />
1918
</span>
20-
</ng-template>
19+
}
2120

2221
<ng-template #defaultBreadcrumbItemContentTemplate>
23-
<ng-content></ng-content>
22+
<ng-content />
2423
</ng-template>

‎projects/coreui-angular/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, HostBinding, Input } from '@angular/core';
2-
import { NgIf, NgTemplateOutlet } from '@angular/common';
2+
import { NgTemplateOutlet } from '@angular/common';
33
import { RouterModule } from '@angular/router';
44

55
import { HtmlAttributesDirective } from '../../shared';
@@ -10,7 +10,7 @@ import { INavAttributes, INavLinkProps } from './breadcrumb-item';
1010
templateUrl: './breadcrumb-item.component.html',
1111
styleUrls: ['./breadcrumb-item.component.scss'],
1212
standalone: true,
13-
imports: [RouterModule, NgIf, NgTemplateOutlet, HtmlAttributesDirective]
13+
imports: [RouterModule, NgTemplateOutlet, HtmlAttributesDirective]
1414
})
1515
export class BreadcrumbItemComponent {
1616

‎projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.component.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<c-breadcrumb class="m-0">
2-
<ng-template ngFor let-breadcrumb [ngForOf]="breadcrumbs | async" let-last="last">
3-
<ng-container *ngIf="breadcrumb?.label && (breadcrumb?.url?.slice(-1) === '/' || last)">
2+
@for (breadcrumb of breadcrumbs | async; track breadcrumb; let last = $last) {
3+
@if (breadcrumb?.label && (breadcrumb?.url?.slice(-1) === '/' || last)) {
44
<c-breadcrumb-item
55
[active]="last"
66
[url]="breadcrumb?.url"
@@ -9,6 +9,6 @@
99
>
1010
{{ breadcrumb?.label }}
1111
</c-breadcrumb-item>
12-
</ng-container>
13-
</ng-template>
12+
}
13+
}
1414
</c-breadcrumb>

‎projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.component.scss

-3
This file was deleted.

‎projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.component.ts

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
22
import { Observable, Observer } from 'rxjs';
3-
import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
3+
import { AsyncPipe } from '@angular/common';
44

55
import { IBreadcrumbItem } from '../breadcrumb-item/breadcrumb-item';
66
import { BreadcrumbComponent } from '../breadcrumb/breadcrumb.component';
@@ -10,9 +10,8 @@ import { BreadcrumbItemComponent } from '../breadcrumb-item/breadcrumb-item.comp
1010
@Component({
1111
selector: 'c-breadcrumb-router, [cBreadcrumbRouter]',
1212
templateUrl: './breadcrumb-router.component.html',
13-
styleUrls: ['./breadcrumb-router.component.scss'],
1413
standalone: true,
15-
imports: [BreadcrumbComponent, BreadcrumbItemComponent, NgForOf, NgIf, AsyncPipe]
14+
imports: [BreadcrumbComponent, BreadcrumbItemComponent, AsyncPipe]
1615
})
1716
export class BreadcrumbRouterComponent implements OnChanges, OnDestroy, OnInit {
1817
constructor(

‎projects/coreui-angular/src/lib/carousel/carousel-control/carousel-control.component.html

+7-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1-
<div #content *ngIf = "hasContent; else defaultContent"><ng-content></ng-content></div>
2-
<ng-template #defaultContent>
1+
@if (hasContent) {
2+
<div #content>
3+
<ng-content />
4+
</div>
5+
} @else {
36
<span [class]="carouselControlIconClass" [attr.aria-label]="direction" [attr.aria-hidden]="true"></span>
4-
<span class="visually-hidden">{{caption}}</span>
5-
</ng-template>
7+
<span class="visually-hidden">{{ caption }}</span>
8+
}

‎projects/coreui-angular/src/lib/carousel/carousel-control/carousel-control.component.ts

+1-3
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,13 @@ import {
88
Input,
99
ViewChild
1010
} from '@angular/core';
11-
import { NgIf } from '@angular/common';
1211

1312
import { CarouselState } from '../carousel-state';
1413

1514
@Component({
1615
selector: 'c-carousel-control',
1716
templateUrl: './carousel-control.component.html',
18-
standalone: true,
19-
imports: [NgIf]
17+
standalone: true
2018
})
2119
export class CarouselControlComponent implements AfterViewInit {
2220

‎projects/coreui-angular/src/lib/carousel/carousel-indicators/carousel-indicators.component.html

+9-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
<div class="carousel-indicators">
2-
<ng-container *ngFor="let item of items; let i=index">
3-
<button [attr.data-coreui-target]="i" type="button" (click)="onClick(i)" [class]="{active: active === i}" [attr.aria-current]="active === i"></button>
4-
</ng-container>
2+
@for (item of items; track item; let i = $index) {
3+
<button
4+
[attr.data-coreui-target]="i"
5+
type="button"
6+
(click)="onClick(i)"
7+
[class]="{ active: active === i }"
8+
[attr.aria-current]="active === i"
9+
></button>
10+
}
511
</div>

‎projects/coreui-angular/src/lib/carousel/carousel-indicators/carousel-indicators.component.ts

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { Component, OnDestroy, OnInit } from '@angular/core';
2-
import { NgForOf } from '@angular/common';
32
import { Subscription } from 'rxjs';
43

54
import { CarouselState } from '../carousel-state';
@@ -8,8 +7,7 @@ import { CarouselService } from '../carousel.service';
87
@Component({
98
selector: 'c-carousel-indicators',
109
templateUrl: './carousel-indicators.component.html',
11-
standalone: true,
12-
imports: [NgForOf]
10+
standalone: true
1311
})
1412
export class CarouselIndicatorsComponent implements OnInit, OnDestroy {
1513
constructor(

‎projects/coreui-angular/src/lib/carousel/carousel-item/carousel-item.component.html

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
<!--todo ngIf-->
2-
<ng-container *ngIf="active">
3-
<ng-content></ng-content>
4-
</ng-container>
1+
@if (active) {
2+
<ng-content />
3+
}
54

‎projects/coreui-angular/src/lib/carousel/carousel-item/carousel-item.component.scss

-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
:host {
22
display: block;
3-
//display: block !important;
43
}

‎projects/coreui-angular/src/lib/carousel/carousel-item/carousel-item.component.ts

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { AfterViewInit, ChangeDetectorRef, Component, HostBinding, Input, OnDestroy } from '@angular/core';
2-
import { NgIf } from '@angular/common';
32
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
43
import { Subscription } from 'rxjs';
54

@@ -9,8 +8,7 @@ import { CarouselService } from '../carousel.service';
98
selector: 'c-carousel-item',
109
templateUrl: './carousel-item.component.html',
1110
styleUrls: ['./carousel-item.component.scss'],
12-
standalone: true,
13-
imports: [NgIf]
11+
standalone: true
1412
})
1513
export class CarouselItemComponent implements OnDestroy, AfterViewInit {
1614

‎projects/coreui-angular/src/lib/header/header/header.component.html

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
<div [ngClass]="headerClasses" *ngIf="!!container; else elseBlock">
2-
<ng-content></ng-content>
3-
</div>
4-
<ng-template #elseBlock>
5-
<ng-content></ng-content>
6-
</ng-template>
1+
@if (!!container) {
2+
<div [ngClass]="headerClasses">
3+
<ng-content />
4+
</div>
5+
} @else {
6+
<ng-content />
7+
}
78

89

‎projects/coreui-angular/src/lib/header/header/header.component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, HostBinding, Input } from '@angular/core';
2-
import { NgClass, NgIf } from '@angular/common';
2+
import { NgClass } from '@angular/common';
33

44
import { Positions } from '../../coreui.types';
55

@@ -9,7 +9,7 @@ type Container = boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'fluid';
99
selector: 'c-header, [c-header]',
1010
templateUrl: './header.component.html',
1111
standalone: true,
12-
imports: [NgClass, NgIf]
12+
imports: [NgClass]
1313
})
1414
export class HeaderComponent {
1515
/**

‎projects/coreui-angular/src/lib/sidebar/sidebar-brand/sidebar-brand.component.html

+12-11
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1-
<ng-template [ngIf]="brandImg">
1+
@if (brandImg) {
22
<a [routerLink]="routerLink">
3-
<img *ngIf="brandFull"
4-
[cHtmlAttr]="brandFull"
5-
[ngClass]="'sidebar-brand-full'">
6-
<img *ngIf="brandNarrow"
7-
[cHtmlAttr]="brandNarrow"
8-
[ngClass]="'sidebar-brand-narrow'">
3+
@if (brandFull) {
4+
<img [cHtmlAttr]="brandFull"
5+
[ngClass]="'sidebar-brand-full'">
6+
}
7+
@if (brandNarrow) {
8+
<img [cHtmlAttr]="brandNarrow"
9+
[ngClass]="'sidebar-brand-narrow'">
10+
}
911
</a>
10-
</ng-template>
11-
<ng-template [ngIf]="!brandImg">
12-
<ng-content></ng-content>
13-
</ng-template>
12+
} @else {
13+
<ng-content />
14+
}

‎projects/coreui-angular/src/lib/sidebar/sidebar-brand/sidebar-brand.component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, HostBinding, Input, OnInit } from '@angular/core';
2-
import { NgClass, NgIf } from '@angular/common';
2+
import { NgClass } from '@angular/common';
33
import { RouterLink } from '@angular/router';
44

55
import { HtmlAttributesDirective } from '../../shared';
@@ -8,7 +8,7 @@ import { HtmlAttributesDirective } from '../../shared';
88
selector: 'c-sidebar-brand',
99
templateUrl: './sidebar-brand.component.html',
1010
standalone: true,
11-
imports: [RouterLink, HtmlAttributesDirective, NgIf, NgClass]
11+
imports: [RouterLink, HtmlAttributesDirective, NgClass]
1212
})
1313
export class SidebarBrandComponent implements OnInit {
1414

‎projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-group.component.html

+11-5
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
44
href>
55
<ng-container *ngTemplateOutlet="iconTemplate ; context: {$implicit: item}" />
66
<ng-container>{{ item.name }}</ng-container>
7-
<span *ngIf="helper.hasBadge(item)" [ngClass]="item | cSidebarNavBadge">{{ item.badge.text }}</span>
7+
@if (helper.hasBadge(item)) {
8+
<span [ngClass]="item | cSidebarNavBadge">{{ item.badge.text }}</span>
9+
}
810
</a>
911
<c-sidebar-nav
1012
(@openClose.done)="onAnimationDone($event)"
@@ -17,13 +19,17 @@
1719
/>
1820

1921
<ng-template #iconTemplate let-item>
20-
<i *ngIf="item?.icon" [ngClass]="item | cSidebarNavIcon"></i>
21-
<ng-template [ngIf]="item?.iconComponent">
22+
@if (item?.icon) {
23+
<i [ngClass]="item | cSidebarNavIcon"></i>
24+
}
25+
@if ("item?.iconComponent") {
2226
<svg
2327
[cIcon]="item.iconComponent?.content"
2428
[customClasses]="item | cSidebarNavIcon"
2529
[name]="item.iconComponent?.name"
2630
/>
27-
</ng-template>
28-
<span *ngIf="!item?.icon && !item?.iconComponent" [ngClass]="item | cSidebarNavIcon"></span>
31+
}
32+
@if (!item?.icon && !item?.iconComponent) {
33+
<span [ngClass]="item | cSidebarNavIcon"></span>
34+
}
2935
</ng-template>

‎projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.html

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
<a [ngClass]="getItemClass()"
22
href="{{item.url}}"
33
[cHtmlAttr]="item.attributes">
4-
<i *ngIf="helper.hasIcon(item)" [ngClass]="getLabelIconClass()"></i>
4+
@if (helper.hasIcon(item)) {
5+
<i [ngClass]="getLabelIconClass()"></i>
6+
}
57
<ng-container>{{ item.name }}</ng-container>
6-
<span *ngIf="helper.hasBadge(item)" [ngClass]="item | cSidebarNavBadge">{{ item.badge.text }}</span>
8+
@if (helper.hasBadge(item)) {
9+
<span [ngClass]="item | cSidebarNavBadge">{{ item.badge.text }}</span>
10+
}
711
</a>

0 commit comments

Comments
 (0)