Posts

Showing posts from July, 2023

3. Attribute Directives - ngStyle

Image
3.A.  Apply multiple CSS properties to a paragraph in a component using ngStyle. Add the following code to component.ts export class YourComponent {   paragraphColor: string = 'red';   paragraphFontSize: string = '20px'; } In your component.html file, use the ngStyle directive to apply the styles: <p [ngStyle]="{ 'color': paragraphColor, 'font-size': paragraphFontSize }">   This paragraph will have dynamic styles applied using ngStyle. </p> Whenever the component's properties paragraphColor or paragraphFontSize change, the paragraph's style will be automatically updated accordingly. For instance, if you want to change the styles dynamically based on a button click, you can do it in the component's logic: export class YourComponent { paragraphColor: string = 'red'; paragraphFontSize: string = '20px'; changeStyles() { this.paragraphColor = 'blue'; this.paragraphFontSize ...

2. Structural Directives - ngIf

 2.a  Structural Directives - ngIf Create a login form with username and password fields. If the user enters the correct credentials, it should render a "Welcome <<username>>" message otherwise it should render "Invalid Login!!! Please try again..." message Step 1: Generate a new component ng generate component login step 2: Update the login component template Open the login.component.html file and replace its content with the following code: <div *ngIf="isLoggedIn; else loginForm"> <h2>Welcome {{ username }}!</h2> </div> <ng-template #loginForm> <form (ngSubmit)="submitForm()"> <div> <label for="username">Username:</label> <input type="text" id="username" [(ngModel)]="username" required> </div> <div> <label for="password">Password:</label> <input type=...