Ninja Space Content Blog

Depending on where I am in the tutorial, I think I may decide to either make Sunday the beginning of a new week or the ending of the current week. I am now getting into forms using the Programming with Mosh's Angular Tutorial. It seems like the right way to start a new week so all of the my notes about creating Angular forms could be in one place. Therefore, starting today, I'm in my 5th week of learning Angular. Click here to see my weekly breakdown of learning 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:
<div class="panel-body">

I'm on Week Three of Angular and I'm going to re-do a workshop again because I wanted to figure something out that wasn't working properly for me before. I'm coding along with Programming with Mosh's tutorial on Angular.

My Fixes
In the Section 14-Solution-Favorite-Component, Mosh wrote the following line in the favorite.component.ts file: 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.

Component API
This is where the input is the state and the output is the event. You would need to import the Input decorator and also note  @Input() isFavorite!: boolean; in your variable to define an Input property.

Output Properties
For some reason, I had to go over this twice to get it to work. Just like the input part, I had to import Output and additionally, also import EventEmitter and to define the output I had to code the following:  @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>

Styles
There are three ways to style. What comes last will become effective. You can write in-line with a style tag. You can use styles through the component.css or add styles property in an array. There's a reference on Shadow DOM.

This is Week Two of Angular Part 2, click here to see Week Two of Angular Part 1.

What else impresses me about Angular so far
I am so excited about their pipes and how easily it is to change the format of your data!

Two-way Binding
Following the Angular Tutorial from Programming with Mosh, I kept getting the following error: "NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'." After some googling, I realized that with my version of Angular installed, I had to go to my app.module.ts file to add:
import { FormsModule } from '@angular/forms'; and include FormsModule under my array of imports.

Using Bootstrap Icons
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.

Creating a New Pipe
You can create a new pipe in the terminal by typing 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.

Input Properties
Going through the lesson with Mosh at 15%, I couldn't replicate the same results as he did using the same code. It could be that my Angular/TypeScript version is different than his and so the implementation may be different now. I'll need to revisit this!

Cool Tip
A cool tip that I learned is how to change a variable name and let it change the rest of them by selecting the variable name, click F2 and then change the variable name and click 'enter'.

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)" />