Week Four of Learning Angular
April 5, 2021Week Three of Learning Angular
April 1, 2021Week Two of Learning Angular Part 2
March 25, 2021Week Two of Learning Angular Part 1
March 22, 2021About Ninja Space Content
Ninja Space Content |
California |
![]() |
Posted by Ninja Space Content. Posted In : angular
<div class="panel-body">
<ng-content select=".body"></ng-content>
</div>
<div *ngif="courses.length > 0">
List of courses
<div *ngif="courses.length == 0">No courses yet
<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>
<div [hidden]="courses.length == 0">List of courses</div>
<div [hidden]="courses.length > 0">No courses yet</div>
<div [ngSwitch]="viewMode">
<div *ngSwitchCase="'map'">Map View Content</div>
<div *ngSwitchCase="'list'">List View Content</div>
<div *ngSwitchDefault>Otherwise</div>
</div>
list = [
{id: 1,name: "course1"},
{id: 2,name: "course2"},
{id: 3,name: "course3"},
];
<ul>
<li *ngFor="let course of courses; even as isEven">
{{course.name}} <span *ngIf="isEven">(EVEN)</span>
</li>
</ul>
onRemove(course: any) {
let index = this.courses.indexOf(course);
this.courses.splice(index, 1)
}
<ul>
<li *ngFor="let course of courses; even as isEven">
{{course.name}}
<button (click)="onRemove(course)">remove</button>
</li>
</ul>
TrackBy
trackCourse(index: number, course: any) {
return course? course.id : undefined;
}
<button (click)="loadCourses()">Add</button>
<ul>
<li *ngFor="let course of courses; trackBy: trackCourse">
{{course.name}}
</li>
</ul>
<span
class="bi"
[ngClass]="{
'bi-star-fill': isSelected,
'bi-star': !isSelected
}"
(click)="onClick()"
>
Star Test Icon
</span>
<button
[style.backgroundColor]="canSave ? 'blue': 'gray'"
[style.color]="canSave ? 'white' : 'black'"
[style.fontWeight]="canSave ? 'bold' : 'normal'"
>
Save
</button>
<button
[ngStyle]="{
'backgroundColor': canSave? 'blue': 'gray',
'color' : canSave? 'pink' : 'black'
}"
>
Save
</button>
<div>
<span>{{task.assignee?.name}}</span>
</div>
ng g d directive-name
Posted by Ninja Space Content. Posted In : angular
isFavorite: boolean;
and it showed a red squiggly line for me and my front end would not compile right. There were two different changes that I could choose in order to fix it. I could either declare the state as false like so: isFavorite = false;
or I could add the exclamation point after my variable name like so: isFavorite!: boolean;
. The reasoning why it worked for Mosh his way and not for me is because I am using a later version of TypeScript. His tutorial is a few years old. That is something you'll always have to keep in mind as a programmer. Things are always changing. @Input() isFavorite!: boolean;
in your variable to define an Input property. @Output() change = new EventEmitter();
and then add the following as a method: onClick() {
this.isTest = !this.isTest;
this.change.emit();
}
and then finally, in the html file I could implement this like so: <favorite [isfavorite]="post.isFavorite" (change)="onFavoriteChange()"></favorite>Posted by Ninja Space Content. Posted In : angular
import { FormsModule } from '@angular/forms';
and include FormsModule under my array of imports.First, npm i bootstrap-icons
. Then add @import "~bootstrap-icons/font/bootstrap-icons.css";
to the style.css file. After that, you can implement the icon of your choice from https://icons.getbootstrap.com.ng g p pipe-name
. Go to that ts file and edit the transform section. Then, in the template or html file, you will implement it.Posted by Ninja Space Content. Posted In : angular
import {Component} from '@angular/core';
@Component({
selector: 'names',
template: '<h2>Names</h2>'
})
ng g c dogs
that you'd type in the command line.<li *ngFor="let name of names">
{{name}}
</li>
<h2>{{ title }}</h2>
or Property Binding like:
<h2 [textContent]="title"></h2>
npm install bootstrap --save.
Then, go to styles.css to import it by adding the following to the top:@import "~bootstrap/dist/css/bootstrap.css;"
.
onSave($event:any) {console.log("Button was clicked info", $event)}
ng g s friends
ng g c authors
Posted by Ninja Space Content. Posted In : angular
Ninja Space Content |
California |
![]() |
Read about enabling two factor authentication on GitHub: https://t.co/G2ZKrpdVUw
— Coding Bootcamp Grad (@codingcampgrad) January 17, 2021