Week Four of Learning Angular
Posted by Ninja Space Content on Monday, April 5, 2021 Under: angular
I'm on week 4 of learning Angular now! To see my weekly break down on learning Angular, go to Angular Blogs' List. What I'm realizing is that because I am note taking and coding along the way, a 5 minute video tutorial could easily have me spending 15 minutes to digest the material before moving onto the next video clip! If there is an unforeseen bug, it would take even longer. So make sure you allot enough time in between if you're studying the same way I am.
Using ng-content property
Use ng-content container as mark-up convenience like so:
Directives
Use ngIf for looping depending on a condition. We use directives to modify the DOM. There are two types: structural and attribute. Other directives include: ngSwitchCase and ngFor. One way is:
Another way is:
You can also use the hidden property as well but this doesn't remove the elements from the DOM; it just hides it. Example of a hidden property:
ngSwitchCase
I really like the ngSwitchCase directive. It's great for switching things back and forth for viewing. Here is the sample code:
Important Note
One thing that threw me off that's different from React is you need a comma after the last object in your array in Angular or else you get a compile error. This is the correct syntax below:
ngFor Directive useful values
ngFor is really ngForOf. You can utilize other things in this loop like: index as i (local variable), first, last, even and odd.
Ex:
Remove and Update on Change Detection
Angular is so intuitive. It can detect change and updates automatically. It is so easily to create a remove button for each element like so:
Under ts file:
Under html file:
TrackBy is such a great tool to use when you want to improve performance with large data. Here's an example.
Under ts file:
Under html file:
Example of an Attribute Directive using ngClass
There's usually more than one way of making something work. Here an example of using a favorite icon with an attribute directive:
Styling with CSS
You can style like so:
or use ngStyle directive to make it look cleaner like so:
Safe Traversal Operator
This is important to use when using complex data. When a value is null, you don't want the console to throw red errors. By solving this , you can use the safe traversal operator with a question mark like so:
Custom Directives
To create a new directive, go to terminal and type:
Using ng-content property
Use ng-content container as mark-up convenience like so:
<div class="panel-body"> <ng-content select=".body"></ng-content>
</div>
Directives
Use ngIf for looping depending on a condition. We use directives to modify the DOM. There are two types: structural and attribute. Other directives include: ngSwitchCase and ngFor. One way is:
<div *ngif="courses.length > 0"> List of courses<div *ngif="courses.length == 0">No courses yet
Another way is:
<div *ngIf="courses.length > 0; then coursesList else noCourses"> List of courses</div><ng-template #coursesList> List of Courses</ng-template><ng-template #noCourses>No courses yet</ng-template>
You can also use the hidden property as well but this doesn't remove the elements from the DOM; it just hides it. Example of a hidden property:
<div [hidden]="courses.length == 0">List of courses</div><div [hidden]="courses.length > 0">No courses yet</div>
ngSwitchCase
I really like the ngSwitchCase directive. It's great for switching things back and forth for viewing. Here is the sample code:
<div [ngSwitch]="viewMode"> <div *ngSwitchCase="'map'">Map View Content</div> <div *ngSwitchCase="'list'">List View Content</div> <div *ngSwitchDefault>Otherwise</div></div>
Important Note
One thing that threw me off that's different from React is you need a comma after the last object in your array in Angular or else you get a compile error. This is the correct syntax below:
list = [ {id: 1,name: "course1"}, {id: 2,name: "course2"}, {id: 3,name: "course3"}, ];
ngFor Directive useful values
ngFor is really ngForOf. You can utilize other things in this loop like: index as i (local variable), first, last, even and odd.
Ex:
<ul> <li *ngFor="let course of courses; even as isEven"> {{course.name}} <span *ngIf="isEven">(EVEN)</span> </li></ul> Remove and Update on Change Detection
Angular is so intuitive. It can detect change and updates automatically. It is so easily to create a remove button for each element like so:
Under ts file:
onRemove(course: any) { let index = this.courses.indexOf(course); this.courses.splice(index, 1) }
Under html file:
<ul> <li *ngFor="let course of courses; even as isEven"> {{course.name}} <button (click)="onRemove(course)">remove</button> </li></ul>
TrackByTrackBy is such a great tool to use when you want to improve performance with large data. Here's an example.
Under ts file:
trackCourse(index: number, course: any) { return course? course.id : undefined; }
Under html file:
<button (click)="loadCourses()">Add</button><ul> <li *ngFor="let course of courses; trackBy: trackCourse"> {{course.name}} </li></ul>
Example of an Attribute Directive using ngClass
There's usually more than one way of making something work. Here an example of using a favorite icon with an attribute directive:
<span class="bi" [ngClass]="{ 'bi-star-fill': isSelected, 'bi-star': !isSelected
}" (click)="onClick()" > Star Test Icon</span>
Styling with CSS
You can style like so:
<button [style.backgroundColor]="canSave ? 'blue': 'gray'" [style.color]="canSave ? 'white' : 'black'" [style.fontWeight]="canSave ? 'bold' : 'normal'">Save</button>
or use ngStyle directive to make it look cleaner like so:
<button [ngStyle]="{ 'backgroundColor': canSave? 'blue': 'gray', 'color' : canSave? 'pink' : 'black' }" >Save</button>
Safe Traversal Operator
This is important to use when using complex data. When a value is null, you don't want the console to throw red errors. By solving this , you can use the safe traversal operator with a question mark like so:
<div><span>{{task.assignee?.name}}</span></div>
Custom Directives
To create a new directive, go to terminal and type:
ng g d directive-nameIn : angular
Tags: learning angular directives ng
I have been building simple websites on my own since 2008 and currently run several websites at the moment, including this one. I used to be an account manager for an affiliate/e-commerce company, helping affiliates grow their sales so I have some knowledge on the business side and client side of affiliate marketing. During the Covid-19 pandemic, I completed a JavaScript coding bootcamp and graduated in Dec 2020. I've been working as a contractor for a few software companies ever since.