Intro to Angular 9 Tutorial

What is Angular?

Setup

The Basics

Let’s begin

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

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"
}
<h1>{{title}}</h1><router-outlet></router-outlet>

Creating another component

ng generate component helloworld
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 {}
}
<h1>{{ helloWorld }}</h1>
<h1>{{title}}</h1>
<app-helloworld></app-helloworld>
<router-outlet></router-outlet>

Directives

The Angular Router

const routes: Routes = [
{ path: "first-component", component: FirstComponent },
{ path: "second-component", component: SecondComponent },
]
<ul>
<li>
<a routerLink="/first-component" routerLinkActive="active">
First Component
</a>
</li>
<li>
<a routerLink="/second-component" routerLinkActive="active">
Second Component
</a>
</li>
</ul>

Bottom line

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store