ionic_angular_standalone_component_with_list_and_button.ts

1import { Component } from '@angular/core';
2import { 
3  IonHeader, 
4  IonToolbar, 
5  IonTitle, 
6  IonContent, 
7  IonList, 
8  IonItem, 
9  IonLabel, 
10  IonButton 
11} from '@ionic/angular/standalone';
12
13@Component({
14  selector: 'app-home',
15  template: `
16    <ion-header [translucent]="true">
17      <ion-toolbar>
18        <ion-title>
19          Ionic Quickstart
20        </ion-title>
21      </ion-toolbar>
22    </ion-header>
23
24    <ion-content [fullscreen]="true">
25      <ion-header collapse="condense">
26        <ion-toolbar>
27          <ion-title size="large">Ionic Quickstart</ion-title>
28        </ion-toolbar>
29      </ion-header>
30
31      <ion-list lines="inset">
32        <ion-item>
33          <ion-label>
34            <h1>Welcome to Ionic</h1>
35            <p>This is a basic TypeScript component.</p>
36          </ion-label>
37        </ion-item>
38      </ion-list>
39
40      <div class="ion-padding">
41        <ion-button expand="block" (click)="showAlert()">Click Me</ion-button>
42      </div>
43    </ion-content>
44  `,
45  standalone: true,
46  imports: [
47    IonHeader, 
48    IonToolbar, 
49    IonTitle, 
50    IonContent, 
51    IonList, 
52    IonItem, 
53    IonLabel, 
54    IonButton
55  ],
56})
57export class HomePage {
58  constructor() {}
59
60  showAlert() {
61    alert('Hello from Ionic and TypeScript!');
62  }
63}