Skip to content

Commit 86cfaa5

Browse files
oguzhanagiroguzhanagir
committed
Updated HTML files to use new Angular 18 control flow syntax
1 parent 4190478 commit 86cfaa5

17 files changed

+1139
-1096
lines changed

‎angular/angular.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -182,5 +182,8 @@
182182
"@schematics/angular:directive": {
183183
"prefix": "app"
184184
}
185+
},
186+
"cli": {
187+
"analytics": false
185188
}
186189
}

‎angular/src/account/account.component.html

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<div class="login-box">
22
<account-header></account-header>
33
<div class="card">
4-
<div *ngIf="showTenantChange()" class="card-header">
5-
<tenant-change></tenant-change>
6-
</div>
4+
@if (showTenantChange()) {
5+
<div class="card-header">
6+
<tenant-change></tenant-change>
7+
</div>
8+
}
79
<div class="card-body login-card-body">
810
<router-outlet></router-outlet>
911
</div>

‎angular/src/account/layout/account-languages.component.html

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
1-
<div class="text-center">
2-
<ng-container *ngFor="let language of languages">
3-
<a
4-
*ngIf="language.name != currentLanguage.name"
5-
href="javascript:void(0);"
6-
(click)="changeLanguage(language.name)"
7-
>
8-
<span
9-
title="{{ language.displayName }}"
1+
<div class="text-center">
2+
@for (language of languages; track language) {
3+
@if (language.name != currentLanguage.name) {
4+
<a
5+
href="javascript:void(0);"
6+
(click)="changeLanguage(language.name)"
7+
>
8+
<span
9+
title="{{ language.displayName }}"
1010
[attr.class.current-language-icon]="
1111
language.name != currentLanguage.name
1212
"
13-
>
14-
<i class="d-inline-block mx-1 {{ language.icon }}"></i>
15-
</span>
16-
</a>
17-
</ng-container>
13+
>
14+
<i class="d-inline-block mx-1 {{ language.icon }}"></i>
15+
</span>
16+
</a>
17+
}
18+
}
1819
</div>

‎angular/src/account/login/login.component.html

Lines changed: 64 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -13,71 +13,73 @@ <h4 class="text-center mb-3">{{ "LogIn" | localize }}</h4>
1313
maxlength="256"
1414
#userNameOrEmailAddressModel="ngModel"
1515
#userNameOrEmailAddressEl
16-
/>
17-
<div class="input-group-append">
18-
<div class="input-group-text">
19-
<span class="fas fa-user"></span>
20-
</div>
21-
</div>
22-
</div>
23-
<abp-validation-summary
24-
[control]="userNameOrEmailAddressModel"
25-
[controlEl]="userNameOrEmailAddressEl"
26-
></abp-validation-summary>
27-
</div>
28-
<div class="form-group">
29-
<div class="input-group">
30-
<input
31-
type="password"
32-
class="form-control"
33-
name="password"
34-
[(ngModel)]="authService.authenticateModel.password"
35-
[placeholder]="'Password' | localize"
36-
required
37-
maxlength="32"
38-
#passwordModel="ngModel"
39-
#passwordEl
40-
/>
41-
<div class="input-group-append">
42-
<div class="input-group-text">
43-
<span class="fas fa-lock"></span>
16+
/>
17+
<div class="input-group-append">
18+
<div class="input-group-text">
19+
<span class="fas fa-user"></span>
20+
</div>
4421
</div>
4522
</div>
23+
<abp-validation-summary
24+
[control]="userNameOrEmailAddressModel"
25+
[controlEl]="userNameOrEmailAddressEl"
26+
></abp-validation-summary>
4627
</div>
47-
<abp-validation-summary
48-
[control]="passwordModel"
49-
[controlEl]="passwordEl"
50-
></abp-validation-summary>
51-
</div>
52-
<div class="form-group row">
53-
<div class="col-md-8">
54-
<div class="custom-control custom-checkbox">
28+
<div class="form-group">
29+
<div class="input-group">
5530
<input
56-
type="checkbox"
57-
class="custom-control-input"
58-
id="rememberMe"
59-
name="rememberMe"
60-
[(ngModel)]="authService.rememberMe"
61-
/>
62-
<label for="rememberMe" class="custom-control-label">
63-
{{ "RememberMe" | localize }}
64-
</label>
31+
type="password"
32+
class="form-control"
33+
name="password"
34+
[(ngModel)]="authService.authenticateModel.password"
35+
[placeholder]="'Password' | localize"
36+
required
37+
maxlength="32"
38+
#passwordModel="ngModel"
39+
#passwordEl
40+
/>
41+
<div class="input-group-append">
42+
<div class="input-group-text">
43+
<span class="fas fa-lock"></span>
44+
</div>
45+
</div>
46+
</div>
47+
<abp-validation-summary
48+
[control]="passwordModel"
49+
[controlEl]="passwordEl"
50+
></abp-validation-summary>
6551
</div>
52+
<div class="form-group row">
53+
<div class="col-md-8">
54+
<div class="custom-control custom-checkbox">
55+
<input
56+
type="checkbox"
57+
class="custom-control-input"
58+
id="rememberMe"
59+
name="rememberMe"
60+
[(ngModel)]="authService.rememberMe"
61+
/>
62+
<label for="rememberMe" class="custom-control-label">
63+
{{ "RememberMe" | localize }}
64+
</label>
65+
</div>
66+
</div>
67+
<div class="col-md-4">
68+
<button
69+
type="submit"
70+
class="btn btn-primary btn-block"
71+
[disabled]="!loginForm.form.valid || submitting"
72+
>
73+
{{ "LogIn" | localize }}
74+
</button>
75+
</div>
76+
</div>
77+
</form>
78+
@if (isSelfRegistrationAllowed) {
79+
<p class="mb-1">
80+
<a [routerLink]="['../register']">
81+
<i class="fa fa-plus-circle"></i> {{ "Register" | localize }}
82+
</a>
83+
</p>
84+
}
6685
</div>
67-
<div class="col-md-4">
68-
<button
69-
type="submit"
70-
class="btn btn-primary btn-block"
71-
[disabled]="!loginForm.form.valid || submitting"
72-
>
73-
{{ "LogIn" | localize }}
74-
</button>
75-
</div>
76-
</div>
77-
</form>
78-
<p *ngIf="isSelfRegistrationAllowed" class="mb-1">
79-
<a [routerLink]="['../register']">
80-
<i class="fa fa-plus-circle"></i> {{ "Register" | localize }}
81-
</a>
82-
</p>
83-
</div>

‎angular/src/account/tenant/tenant-change.component.html

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
1-
<div *ngIf="isMultiTenancyEnabled" class="text-center tenant-change-component">
2-
<span>
3-
{{ "CurrentTenant" | localize }}:
4-
<span *ngIf="tenancyName" title="{{ name }}">
5-
<strong>{{ tenancyName }}</strong>
6-
</span>
7-
<span *ngIf="!tenancyName">{{ "NotSelected" | localize }}</span>
8-
(<a href="javascript:;" (click)="showChangeModal()">
1+
@if (isMultiTenancyEnabled) {
2+
<div class="text-center tenant-change-component">
3+
<span>
4+
{{ "CurrentTenant" | localize }}:
5+
@if (tenancyName) {
6+
<span title="{{ name }}">
7+
<strong>{{ tenancyName }}</strong>
8+
</span>
9+
}
10+
@if (!tenancyName) {
11+
<span>{{ "NotSelected" | localize }}</span>
12+
}
13+
(<a href="javascript:;" (click)="showChangeModal()">
914
{{ "Change" | localize }} </a
10-
>)
11-
</span>
12-
</div>
15+
>)
16+
</span>
17+
</div>
18+
}

‎angular/src/app/layout/header-language-menu.component.html

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,17 @@
66
</span>
77
</a>
88
<div class="dropdown-menu dropdown-menu-right p-0" *dropdownMenu>
9-
<ng-container *ngFor="let language of languages">
10-
<a
11-
*ngIf="language.name != currentLanguage.name"
12-
class="dropdown-item"
13-
href="javascript:;"
14-
(click)="changeLanguage(language.name)"
15-
>
16-
<i class="d-inline-block {{ language.icon }} mr-1"></i>
17-
{{ language.displayName }}
18-
</a>
19-
</ng-container>
9+
@for (language of languages; track language) {
10+
@if (language.name != currentLanguage.name) {
11+
<a
12+
class="dropdown-item"
13+
href="javascript:;"
14+
(click)="changeLanguage(language.name)"
15+
>
16+
<i class="d-inline-block {{ language.icon }} mr-1"></i>
17+
{{ language.displayName }}
18+
</a>
19+
}
20+
}
2021
</div>
2122
</li>

‎angular/src/app/layout/sidebar-menu.component.html

Lines changed: 62 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -4,68 +4,73 @@
44
data-widget="treeview"
55
role="menu"
66
data-accordion="false"
7-
>
8-
<ng-container *ngFor="let item of menuItems">
7+
>
8+
@for (item of menuItems; track item) {
99
<ng-container
1010
*ngTemplateOutlet="sidebarInner; context: { item: item }"
1111
></ng-container>
12-
</ng-container>
12+
}
1313
</ul>
1414
</nav>
1515

1616
<ng-template #sidebarInner let-item="item">
17-
<li
18-
*ngIf="isMenuItemVisible(item)"
19-
class="nav-item"
20-
[class.menu-open]="!item.isCollapsed"
21-
[class.has-treeview]="item.children"
22-
>
23-
<a
24-
*ngIf="item.route && item.route.indexOf('http') != 0"
25-
class="nav-link"
26-
[routerLink]="item.route"
27-
[class.active]="item.isActive"
28-
>
29-
<i class="nav-icon {{ item.icon }}"></i>
30-
<p>
31-
{{ item.label }}
32-
</p>
33-
</a>
34-
<a
35-
*ngIf="item.route && item.route.indexOf('http') == 0 && !item.children"
36-
class="nav-link"
37-
target="_blank"
38-
[href]="item.route"
39-
>
40-
<i class="nav-icon {{ item.icon }}"></i>
41-
<p>
42-
{{ item.label }}
43-
</p>
44-
</a>
45-
<a
46-
*ngIf="!item.route && item.children"
47-
class="nav-link"
48-
href="javascript:;"
49-
[class.active]="item.isActive"
50-
(click)="item.isCollapsed = !item.isCollapsed"
51-
>
52-
<i class="nav-icon {{ item.icon }}"></i>
53-
<p>
54-
{{ item.label }}
55-
<i class="right fas fa-angle-left"></i>
56-
</p>
57-
</a>
58-
<ul
59-
*ngIf="item.children"
60-
class="nav nav-treeview"
61-
[collapse]="item.isCollapsed"
62-
[isAnimated]="true"
63-
>
64-
<ng-container *ngFor="let item of item.children">
65-
<ng-container
66-
*ngTemplateOutlet="sidebarInner; context: { item: item }"
67-
></ng-container>
68-
</ng-container>
69-
</ul>
70-
</li>
17+
@if (isMenuItemVisible(item)) {
18+
<li
19+
class="nav-item"
20+
[class.menu-open]="!item.isCollapsed"
21+
[class.has-treeview]="item.children"
22+
>
23+
@if (item.route && item.route.indexOf('http') != 0) {
24+
<a
25+
class="nav-link"
26+
[routerLink]="item.route"
27+
[class.active]="item.isActive"
28+
>
29+
<i class="nav-icon {{ item.icon }}"></i>
30+
<p>
31+
{{ item.label }}
32+
</p>
33+
</a>
34+
}
35+
@if (item.route && item.route.indexOf('http') == 0 && !item.children) {
36+
<a
37+
class="nav-link"
38+
target="_blank"
39+
[href]="item.route"
40+
>
41+
<i class="nav-icon {{ item.icon }}"></i>
42+
<p>
43+
{{ item.label }}
44+
</p>
45+
</a>
46+
}
47+
@if (!item.route && item.children) {
48+
<a
49+
class="nav-link"
50+
href="javascript:;"
51+
[class.active]="item.isActive"
52+
(click)="item.isCollapsed = !item.isCollapsed"
53+
>
54+
<i class="nav-icon {{ item.icon }}"></i>
55+
<p>
56+
{{ item.label }}
57+
<i class="right fas fa-angle-left"></i>
58+
</p>
59+
</a>
60+
}
61+
@if (item.children) {
62+
<ul
63+
class="nav nav-treeview"
64+
[collapse]="item.isCollapsed"
65+
[isAnimated]="true"
66+
>
67+
@for (item of item.children; track item) {
68+
<ng-container
69+
*ngTemplateOutlet="sidebarInner; context: { item: item }"
70+
></ng-container>
71+
}
72+
</ul>
73+
}
74+
</li>
75+
}
7176
</ng-template>

0 commit comments

Comments
 (0)