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

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Choosing your CSS library with React

Queue in Javascript — Priority, and Circular Queue

What is React Router and How to use it?

Writing My First Article in Javascript

Advanced Javascript — Hoisting

The Joy of Forms with React and Formik

My First JavaScript+Rails Project

DIY Connected Espresso Machine: Main Class and Indicators (Part 5)

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
Alex Merced Coder

Alex Merced Coder

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

More from Medium

Angular Components….

Angular Development Company

Angular Guidelines —

How to fix “ng: command not found” in angular

How to fix