Scribd
Upload
3 views2 pages

Css 13

The document contains code for an Angular application that displays a list of students with their names and marks. It includes functionality to sort the students by name and demonstrates the use of pipes for text transformation. The application is structured with HTML for the user interface and TypeScript for the component logic.

Uploaded by

ayushx312
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views2 pages

Css 13

The document contains code for an Angular application that displays a list of students with their names and marks. It includes functionality to sort the students by name and demonstrates the use of pipes for text transformation. The application is structured with HTML for the user interface and TypeScript for the component logic.

Uploaded by

ayushx312
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Practical 13

Naqiya Nullwala-230433

[Link]
<div class="container"> </tr>
<tr *ngFor="let s of students">
<h1>Modern Angular External <td>{{[Link]}}</td>
Controller</h1> <td>{{[Link]}}</td>
<h2>{{message}}</h2> </tr>
<h3>Student List</h3> </table>
<button (click)="sortByName()">Sort by <h3>Filters (Pipes)</h3>
Name</button> <input type="text" [(ngModel)]="text"
<table> placeholder="Enter text">
<tr> <p>Uppercase: {{text | uppercase}}</p>
<th>Name</th> <p>Lowercase: {{text | lowercase}}</p>
<th>Marks</th> </div>

[Link]
import { Component } from
'@angular/core'; students = [
import { FormsModule } from { name: 'Sakina', marks: 92 },
'@angular/forms'; { name: 'Naqiya', marks: 92 },
import { CommonModule } from { name: 'Ummehani', marks: 78 }
'@angular/common';
];
@Component({
selector: 'app-root',
standalone: true, sortByName() {
imports: [FormsModule, [Link]((a, b) =>
CommonModule], [Link]([Link]));
templateUrl: './[Link]', }
styleUrl: './[Link]'
})
export class AppComponent { text: string = "";

}
message: string = "Welcome to Modern
Angular Controller ";

You might also like