Intro to Angular 9 Tutorial

What is Angular?

From Angular.io:

Setup

Angular requires a build setup from the beginning (so unline Vue or React, modern Angular can’t be started with a simple script tag). So in that case the first step is to install the Angular CLI tools using node (must install node from nodeJS.org if you don’t already have it).

The Basics

So most of the work you’ll need to do will be in the source folder. In the folder, there is a folder called app which contains a component called app which is the entry point of your application.

Let’s begin

Change the app.component.html to the following.

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

Interpolating data

Let’s add some data to our component, head over the app.component.ts, and update or add a title property in the component's class like so.

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

Create a new component with the following cli command

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

Directives like in Vue allow us to bind data to our html element. Here is a list of many of the basic ones.(technically, directives were originally introduced in AngularJS)

The Angular Router

To setup routes you’ll add object to the routes array in app-routing.module.ts. It should give a name for the route and the class name for the component it should render. This assumes you enabled routing when you created the project so the routing module was automatically imported in app.module.ts.

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

Angular is a robust framework with a lot of features and capabilities. Practice and get comfortable with the above then learn about some of the features and modules in the Angular ecosystem such as the HTTP module and lifecycle methods.

--

--

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 Developer Advocate for Dremio and host of the Web Dev 101 and Datanation Podcasts.