Skip to content

Latest commit

 

History

History
77 lines (75 loc) · 3.38 KB

NOTES.org

File metadata and controls

77 lines (75 loc) · 3.38 KB

Angular and NodeJS - The MEAN Stack Guide 2020 Edition

Notes that I’ve taken during the video portion of the course.

Section 2 - The Angular Frontend

The folder structure

app.module.ts defines the building blocks and features of the application. main.ts is the entry point and loads up the app.module.t

Understanding Angular Components

  • Note taken on [2020-01-25 Sat 11:19]
    A page is made of components. Example: <app-header>, <app-brand>, <app-feature>. These could be broken down even more if desired. If an item has its own logic behind it, then it should be a component. These are easily reused.

Adding First Component

  • Note taken on [2020-01-25 Sat 11:23]
    To create a component manually: create a ‘posts’ subfolder in the ‘app’ folder. create a ‘post-create’ subfolder in ‘posts’. create a ‘post-create.component.ts’ file create a ‘post-create.component.html’ file The new component needs to include the @Component decorator. Before the new component can be used, it must be included in the app.module.ts as well.

Event binding

  • To listen to events, use event binding in the template. These are denoted by () in the html. 
    <button (click)="onAddPost()">Submit Post</button>

Property binding

  • To set attributes on an object in the template, use property [] binding. 
    <textarea [value]="newPost"></textarea>
<textarea [value]="'Needs to be a string'"></textarea>

String interpolation

  • Use string interpolation to output strings in a template 
    <p>{{ newPost }}</p>
<h1>{{ headerText }}</p>

Element references

  • You can use an element reference to address the template object from within the component. For example, from within the html template: 
    <textarea [value]="newPost" #postInputReference></textarea>
<button (click)="onAddPost(postInputReference)">Save Post</button>

    The ‘#’ indicates the name that you are saving the reference to. The element can also be accessed from the component’s typescript code as well:

    onAddPost(postInput: HTMLTextAreaElement) {
    console.log(postInput.value);
}

Two way data binding with ngModel

  • This can be used as a shortcut to the above example, to automatically set an attribute value to a template item. You need to import FormsModule from @angular/forms in the app.module to use it. 
    <textarea [(ngModel)]="enteredValue"></textarea>
<button (click)="onAddPost()"></button>

    The ngModel needs to be bound to an attribute on the component, like so:

       export class TheComponent() {
enteredValue = '';

onAddPost() {
    console.log(this.enteredValue);
}
   }

Installing Angular Material

  • run: ng add @angular/material This will run the angular schematic to add and configure the material framework for you. Use material.angular.io to see what components are available and how to use them. Before you can actually use any of the components in a template, they need to have their modules imported in the app.module.ts file.