Scribd
Upload
5 views

Angular Directives Task

The document outlines the creation of a Mini Student Dashboard using Angular Directives, allowing users to view and manage student information. Key features include displaying a list of students with various details, dynamic styling based on performance, and a toggle for additional student information. It emphasizes the use of interfaces, organized styling, and specific remarks based on student grades.

Uploaded by

Drive User
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
5 views

Angular Directives Task

The document outlines the creation of a Mini Student Dashboard using Angular Directives, allowing users to view and manage student information. Key features include displaying a list of students with various details, dynamic styling based on performance, and a toggle for additional student information. It emphasizes the use of interfaces, organized styling, and specific remarks based on student grades.

Uploaded by

Drive User
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
You are on page 1/ 2

Task: Mini Student Dashboard using Angular Directives

Overview:

Create a simple Student Dashboard where users can:

●​ View a list of students​

●​ Display student details based on conditions​

●​ Show different messages depending on performance​

●​ Apply dynamic styles and classes​

Requirements:

●​ Display a list of students with the following details:​

○​ Name​

○​ Standard​

○​ Gender​

○​ Age​

○​ Enrollment Number​

○​ Grade (A,B,C,D,E,F)​

○​ Status(Pass/Fail)​
​

●​ Display grade-based remarks:​

○​ A: “Excellent!”​

○​ B: “Good!”​

○​ C: “Needs Improvement”​
○​ Any other grade: “No remarks”​

●​ Highlight students based on status using dynamic styles and classes:​

○​ Use color cues (e.g., green for success, red for failure).​

○​ Apply text styles (e.g., bold, italic) based on grade or other characteristics.​

●​ Each student card should have a “Show Details” button, which toggles visibility of
additional info (e.g., age, gender, contact info).
●​ Write your understanding on the trackbyFn function which will be used in ngfor directive
into the app.component.ts file with comments like how you did for previous tasks.
●​ Get an idea of the below problem as discussed:-
○​ <p>
○​ <span class="yellow-color" [ngClass]="{'btn-success': true}"
class="btn"></span>
○​ </p>​

Tips:

●​ Use interfaces for better practice.​

●​ Keep styles organized using component CSS, Tailwind, Bootstrap, or any styling method
you prefer.​

You might also like