Ninja Space Content Blog

I'm officially on my Week Two of Learning Angular. Click here to see Week One. I'm finding that as I'm noting all of these while I'm learning, it's helping me immensely and I hope it'll help you. I decided to purchase Mosh's Angular Tutorial for $15. It seems like a great deal for 30 hours of tutorial and I don't have to waste time weeding through materials and watching in between ads from Youtube.

Components
To make a class a component, you have to add the decorator at the top like import {Component} from '@angular/core';

Then, apply it to the class like a function called a decorator function like @Component({
selector: 'names',
template: '<h2>Names</h2>'
})

You can name the selector anything you want here as this is where you define this name. Make sure to add a template. Then, you go to app.modules file and add the new class Component to the top. Then go to the html file and add <names></name> and you'll see the template on the page.

Instead of manually adding a new file name for a component, you can use the command line to create it as that will save you a few steps. For example, if you're creating a new component for dogs, it would be ng g c dogs that you'd type in the command line.

Directives
Directives are really powerful to use in the template: section. You can put in a loop like so:
<li *ngFor="let name of names">
{{name}}
</li>

Property Binding
There are two ways to use display data in the DOM. You can use interpolation like:
<h2>{{ title }}</h2> or Property Binding like:
<h2 [textContent]="title"></h2>

Bootstrap CSS Library with Angular
You can use boostrap library with Angular. First, in the terminal, you type the following:
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"; 

Event Binding
There was a bug that I kept getting. When I added a $event as a parameter, I kept getting this error: "Parameter '$event' implicitly has an 'any' type.ts(7006)" and after some digging around in StackOverflow, I found that it was because I had to specify what my $event type is so I had to add a : any like so: onSave($event:any) {console.log("Button was clicked info", $event)}

Template Variable
You can use hash in your input to create a variable like so:
<input #name (keyup.enter)="onKeyUp(email.value)" />