ANGULAR VIDEO PLAYLIST: https://www.youtube.com/playlist?list=PLY6oTPmKnKbahNK_YUsjTzP5U-FkGA544

What is Angular?

Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps.

Setup

npm install -g @angular/cli

Once the CLI is installed there are many commands that can be used that will make your life easier when working with Angular. Primarily we want to start by spinning up a new project with the ng new command.

ng new myapp

When prompted say yes to including Angular routing, and use CSS as your styling engine.

Once it is done creating your new project change into the new folder it created, cd myapp. From there to see the default project run the development server with the command ng serve.

The Basics

Every component has 4 main files…

name.component.html: This is the file where you’ll put your HTML template, what does this particular component render to the screen.

name.component.css This is the styling that applies to that particular component.

name.component.ts This is a Typescript file where you’ll put all the programming logic for the component.

name.component.spec.ts This is where you’d write tests for the component

When it comes to the app folder you should notice there are two more very important files.

app-routing.module.ts This is tracks all the routes for the application.

app.module.ts Angular practices what’s called dependency injection to prevent your project from being bloated at build time. So instead of assuming you want every angular feature out of the box, these module files allow you to import the Angular modules you want for forms, HTTP requests, and more.

Let’s begin

<h1>A Test Angular Website</h1><router-outlet></router-outlet>

The router-outlet tag will be where the current route shows up.

Interpolating data

import { Component } from "@angular/core"@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
title = "A Test Angular Website"
}

then update your template in app.component.html like so

<h1>{{title}}</h1><router-outlet></router-outlet>

Creating another component

ng generate component helloworld

You’ll see a new folder in the app folder called “helloworld” with the four main files for this component. In the helloworld.component.ts file let’s add a property to interpolate.

import { Component, OnInit } from "@angular/core"@Component({
selector: "app-helloworld",
templateUrl: "./helloworld.component.html",
styleUrls: ["./helloworld.component.css"],
})
export class HelloworldComponent implements OnInit {
helloWorld = "Hello World"
constructor() {} ngOnInit(): void {}
}

Then let’s interpolate in the template in helloworld.component.html

<h1>{{ helloWorld }}</h1>

Notice in the ts file it tells us the selector will be selector: 'app-helloworld',

Let’s use it in our app component, go back to app.component.html

<h1>{{title}}</h1>
<app-helloworld></app-helloworld>
<router-outlet></router-outlet>

Now you can see the helloworld component on the screen!

Directives

ngModel: binds a form element to a property (binds it to a variable in your class) Requires you to import the Forms Module in app.module.ts => https://angular.io/guide/ngmodules

<input type="text" [(ngModel)]="propertyName"/>

ngIf: This allows you to determine the visibility of an element based on the truthiness of an express or class property.

<div *ngIf="toggleVariable"></div>

ngFor: Loops over an array that is a property of the component, it will create a copy of the element for each element of the array.

<h1 *ngFor="let item of items">{{item}}</h1>

[bindProperty]: To bind properties of an element to a variable in the class use square brackets.

<h1 [id]="variableName">Hello</h1>

(eventBinding): To bind an event to an element use parentesis and point to a function in your corresponding component class (the TS file).

<button (click)="function()">Hello</button>

The Angular Router

const routes: Routes = [
{ path: "first-component", component: FirstComponent },
{ path: "second-component", component: SecondComponent },
]

The once the routes are creates they can be used as links in your component like so.

<ul>
<li>
<a routerLink="/first-component" routerLinkActive="active">
First Component
</a>
</li>
<li>
<a routerLink="/second-component" routerLinkActive="active">
Second Component
</a>
</li>
</ul>

When the link is clicked on that component will render where the <router-outlet> component is on the template.

Bottom line

Alex Merced is a Full Stack Developer, learn more about his work at AlexMercedCoder.com