New control flow

demo/src/app/components/accordion/accordion.routes.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 import { ComponentWrapper } from '../../shared/component-wrapper/component-wrapper.component';
 import { NgbdApiPage } from '../../shared/api-page/api-page.component';
 import { DemoListComponent } from '../../shared/examples-page/demo-list.component';

demo/src/app/components/accordion/demos/header/accordion-header.html

@@ -48,7 +48,9 @@
 			<button ngbAccordionToggle [disabled]="third.disabled" class="p-0 btn btn-link container-fluid text-start ps-0">
 				Third panel
 			</button>
-			<p *ngIf="third.disabled" class="text-muted m-0 small">[I'm&nbsp;disabled]</p>
+			@if (third.disabled) {
+				<p class="text-muted m-0 small">[I'm&nbsp;disabled]</p>
+			}
 		</div>
 		<div ngbAccordionCollapse>
 			<div ngbAccordionBody>

demo/src/app/components/accordion/demos/header/accordion-header.ts

@@ -1,19 +1,16 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
-import { NgIf } from '@angular/common';
 
 @Component({
 	selector: 'ngbd-accordion-header',
 	standalone: true,
-	imports: [NgbAccordionModule, NgIf],
+	imports: [NgbAccordionModule],
 	templateUrl: './accordion-header.html',
 	encapsulation: ViewEncapsulation.None,
-	styles: [
-		`
-			.custom-header::after {
-				content: none;
-			}
-		`,
-	],
+	styles: `
+		.custom-header::after {
+			content: none;
+		}
+	`,
 })
 export class NgbdAccordionHeader {}

demo/src/app/components/accordion/demos/keep-content/accordion-keep-content.ts

@@ -1,11 +1,10 @@
-import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { NgbAccordionModule, NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
 	selector: 'ngbd-accordion-keep-content',
 	standalone: true,
-	imports: [CommonModule, NgbAccordionModule, NgbAlertModule],
+	imports: [NgbAccordionModule, NgbAlertModule],
 	templateUrl: './accordion-keep-content.html',
 })
 export class NgbdAccordionKeepContent {

demo/src/app/components/accordion/demos/static/accordion-static.html

@@ -1,19 +1,21 @@
 <div ngbAccordion [closeOthers]="true">
-	<div ngbAccordionItem *ngFor="let panel of panels" [collapsed]="panel !== 'First'">
-		<h2 ngbAccordionHeader>
-			<button ngbAccordionButton>{{ panel }}</button>
-		</h2>
-		<div ngbAccordionCollapse>
-			<div ngbAccordionBody>
-				<ng-template>
-					Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
-					officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
-					moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
-					keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
-					butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably
-					haven't heard of them accusamus labore sustainable VHS.
-				</ng-template>
+	@for (item of items; track item) {
+		<div ngbAccordionItem [collapsed]="item !== 'First'">
+			<h2 ngbAccordionHeader>
+				<button ngbAccordionButton>{{ item }}</button>
+			</h2>
+			<div ngbAccordionCollapse>
+				<div ngbAccordionBody>
+					<ng-template>
+						Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
+						officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
+						wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
+						Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan
+						excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
+						you probably haven't heard of them accusamus labore sustainable VHS.
+					</ng-template>
+				</div>
 			</div>
 		</div>
-	</div>
+	}
 </div>

demo/src/app/components/accordion/demos/static/accordion-static.ts

@@ -1,13 +1,12 @@
 import { Component } from '@angular/core';
 import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
-import { CommonModule } from '@angular/common';
 
 @Component({
 	selector: 'ngbd-accordion-static',
 	standalone: true,
-	imports: [CommonModule, NgbAccordionModule],
+	imports: [NgbAccordionModule],
 	templateUrl: './accordion-static.html',
 })
 export class NgbdAccordionStatic {
-	panels = ['First', 'Second', 'Third'];
+	items = ['First', 'Second', 'Third'];
 }

demo/src/app/components/accordion/overview/demo/accordion-overview-demo.component.ts

@@ -7,11 +7,6 @@ import { NgbAccordionDirective, NgbAccordionModule } from '@ng-bootstrap/ng-boot
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [NgbAccordionModule, NgbAccordionDirective],
 	template: `
-		<style>
-			.form-group {
-				margin-bottom: 0.5rem;
-			}
-		</style>
 		<div ngbAccordion [closeOthers]="true">
 			<div ngbAccordionItem>
 				<h2 ngbAccordionHeader>

demo/src/app/components/alert/alert.routes.ts

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-
 import { Routes } from '@angular/router';
 import { ComponentWrapper } from '../../shared/component-wrapper/component-wrapper.component';
 import { DemoListComponent } from '../../shared/examples-page/demo-list.component';

demo/src/app/components/alert/demos/basic/alert-basic.html

@@ -1,5 +1,3 @@
-<p>
-	<ngb-alert [dismissible]="false">
-		<strong>Warning!</strong> Better check yourself, you're not looking too good.
-	</ngb-alert>
-</p>
+<ngb-alert [dismissible]="false">
+	<strong>Warning!</strong> Better check yourself, you're not looking too good.
+</ngb-alert>

demo/src/app/components/alert/demos/closeable/alert-closeable.html

@@ -1,6 +1,4 @@
-<p *ngFor="let alert of alerts">
+@for (alert of alerts; track alert) {
 	<ngb-alert [type]="alert.type" (closed)="close(alert)">{{ alert.message }}</ngb-alert>
-</p>
-<p>
-	<button type="button" class="btn btn-primary" (click)="reset()">Reset</button>
-</p>
+}
+<button type="button" class="btn btn-primary" (click)="reset()">Reset</button>

demo/src/app/components/alert/demos/config/alert-config.html

@@ -1,3 +1 @@
-<p>
-	<ngb-alert> This alert's type is success and it's not dismissible because the config has been customized </ngb-alert>
-</p>
+<ngb-alert> This alert's type is success and it's not dismissible because the config has been customized </ngb-alert>

demo/src/app/components/alert/demos/config/alert-config.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component } from '@angular/core';
 import { NgbAlertConfig, NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
@@ -10,8 +10,6 @@ import { NgbAlertConfig, NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
 	providers: [NgbAlertConfig],
 })
 export class NgbdAlertConfig {
-	@Input() public alerts: Array<string> = [];
-
 	constructor(alertConfig: NgbAlertConfig) {
 		// customize default values of alerts used by this component tree
 		alertConfig.type = 'success';

demo/src/app/components/alert/demos/custom/alert-custom.html

@@ -1,3 +1 @@
-<p>
-	<ngb-alert type="custom" [dismissible]="false"><strong>Whoa!</strong> This is a custom alert.</ngb-alert>
-</p>
+<ngb-alert type="custom" [dismissible]="false"><strong>Whoa!</strong> This is a custom alert.</ngb-alert>

demo/src/app/components/alert/demos/custom/alert-custom.ts

@@ -6,14 +6,12 @@ import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
 	standalone: true,
 	imports: [NgbAlertModule],
 	templateUrl: './alert-custom.html',
-	styles: [
-		`
-			:host .alert-custom {
+	styles: `
+			.alert-custom {
 				color: #99004d;
 				background-color: #f169b4;
 				border-color: #800040;
 			}
 		`,
-	],
 })
 export class NgbdAlertCustom {}

demo/src/app/components/alert/demos/selfclosing/alert-selfclosing.html

@@ -1,14 +1,15 @@
 <p>Static self-closing alert that disappears after 20 seconds (refresh the page if it has already disappeared)</p>
-<ngb-alert #staticAlert *ngIf="!staticAlertClosed" (closed)="staticAlertClosed = true"
-	>Check out our awesome new features!</ngb-alert
->
+
+@if (!staticAlertClosed) {
+	<ngb-alert #staticAlert (closed)="staticAlertClosed = true">Check out our awesome new features!</ngb-alert>
+}
 
 <hr />
 
 <p>Show a self-closing success message that disappears after 5 seconds.</p>
-<ngb-alert #selfClosingAlert *ngIf="successMessage" type="success" (closed)="successMessage = ''"
-	>{{ successMessage }}
-</ngb-alert>
-<p>
-	<button class="btn btn-primary" (click)="changeSuccessMessage()">Change message</button>
-</p>
+
+@if (successMessage) {
+	<ngb-alert #selfClosingAlert type="success" (closed)="successMessage = ''">{{ successMessage }}</ngb-alert>
+}
+
+<button class="btn btn-primary" (click)="changeSuccessMessage()">Change message</button>

demo/src/app/components/alert/demos/selfclosing/alert-selfclosing.ts

@@ -1,36 +1,37 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { Subject } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
+import { debounceTime, tap } from 'rxjs/operators';
 import { NgbAlert, NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
-import { NgIf } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
 	selector: 'ngbd-alert-selfclosing',
 	standalone: true,
-	imports: [NgIf, NgbAlertModule],
+	imports: [NgbAlertModule],
 	templateUrl: './alert-selfclosing.html',
 })
-export class NgbdAlertSelfclosing implements OnInit {
-	private _success = new Subject<string>();
+export class NgbdAlertSelfclosing {
+	private _message$ = new Subject<string>();
 
 	staticAlertClosed = false;
 	successMessage = '';
 
 	@ViewChild('staticAlert', { static: false }) staticAlert: NgbAlert;
 	@ViewChild('selfClosingAlert', { static: false }) selfClosingAlert: NgbAlert;
 
-	ngOnInit(): void {
+	constructor() {
 		setTimeout(() => this.staticAlert.close(), 20000);
 
-		this._success.subscribe((message) => (this.successMessage = message));
-		this._success.pipe(debounceTime(5000)).subscribe(() => {
-			if (this.selfClosingAlert) {
-				this.selfClosingAlert.close();
-			}
-		});
+		this._message$
+			.pipe(
+				takeUntilDestroyed(),
+				tap((message) => (this.successMessage = message)),
+				debounceTime(5000),
+			)
+			.subscribe(() => this.selfClosingAlert?.close());
 	}
 
 	public changeSuccessMessage() {
-		this._success.next(`${new Date()} - Message successfully changed.`);
+		this._message$.next(`${new Date()} - Message successfully changed.`);
 	}
 }

demo/src/app/components/carousel/carousel.routes.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 import { ComponentWrapper } from '../../shared/component-wrapper/component-wrapper.component';
 import { NgbdApiPage } from '../../shared/api-page/api-page.component';
 import { DemoListComponent } from '../../shared/examples-page/demo-list.component';

demo/src/app/components/carousel/demos/basic/carousel-basic.html

@@ -1,29 +1,31 @@
-<ngb-carousel *ngIf="images">
-	<ng-template ngbSlide>
-		<div class="picsum-img-wrapper">
-			<img [src]="images[0]" alt="Random first slide" />
-		</div>
-		<div class="carousel-caption">
-			<h3>First slide label</h3>
-			<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
-		</div>
-	</ng-template>
-	<ng-template ngbSlide>
-		<div class="picsum-img-wrapper">
-			<img [src]="images[1]" alt="Random second slide" />
-		</div>
-		<div class="carousel-caption">
-			<h3>Second slide label</h3>
-			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-		</div>
-	</ng-template>
-	<ng-template ngbSlide>
-		<div class="picsum-img-wrapper">
-			<img [src]="images[2]" alt="Random third slide" />
-		</div>
-		<div class="carousel-caption">
-			<h3>Third slide label</h3>
-			<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
-		</div>
-	</ng-template>
-</ngb-carousel>
+@if (images) {
+	<ngb-carousel>
+		<ng-template ngbSlide>
+			<div class="picsum-img-wrapper">
+				<img [src]="images[0]" alt="Random first slide" />
+			</div>
+			<div class="carousel-caption">
+				<h3>First slide label</h3>
+				<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+			</div>
+		</ng-template>
+		<ng-template ngbSlide>
+			<div class="picsum-img-wrapper">
+				<img [src]="images[1]" alt="Random second slide" />
+			</div>
+			<div class="carousel-caption">
+				<h3>Second slide label</h3>
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+			</div>
+		</ng-template>
+		<ng-template ngbSlide>
+			<div class="picsum-img-wrapper">
+				<img [src]="images[2]" alt="Random third slide" />
+			</div>
+			<div class="carousel-caption">
+				<h3>Third slide label</h3>
+				<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
+			</div>
+		</ng-template>
+	</ngb-carousel>
+}

demo/src/app/components/carousel/demos/basic/carousel-basic.ts

@@ -1,11 +1,10 @@
 import { Component } from '@angular/core';
 import { NgbCarouselModule } from '@ng-bootstrap/ng-bootstrap';
-import { NgIf } from '@angular/common';
 
 @Component({
 	selector: 'ngbd-carousel-basic',
 	standalone: true,
-	imports: [NgbCarouselModule, NgIf],
+	imports: [NgbCarouselModule],
 	templateUrl: './carousel-basic.html',
 })
 export class NgbdCarouselBasic {