Learning Angular isn’t the easiest thing in the world. It takes a while to learn it. However, once I understood the basic architecture of Angular, creating apps with it became easier. In this article, I’ll show how I learned Angular and TypeScript without knowledge of either.
The Beginning
When I knew nothing, I started by writing practice apps with Angular. The fastest way to get started is using the Angular CLI. I created a basic app first by install the Angular CLI by running:
npm install -g @angular/cli
Then I created my first Angular app project by running:
ng new practice-app
In the Angular CLI, I chose to include routing. And choose to include CSS so reduce the amount of things I have to learn. Then we start our app by going to the practice-app folder and then run ng serve to start the development server that comes with Angular CLI.
Writing Some Basic Angular Code
Now that I have started our Angular CLI development server, I will write some code.
Showing Some Data on the Screen
I first practiced how to display some dynamic data on the screen from components. First, I went to app.component.ts . I see that it has the following content generated by the Angular CLI:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'practice-app';
}
I start by adding some fields to the AppComponent class, which changed the code to:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
firstName = 'Jane';
lastName = 'Smith';
}
Then I went to app.component.html, which has:
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>
<router-outlet></router-outlet>
generated by Angular CLI. I changed that to:
<p>{{firstName}} {{lastName}}</p>
Then I see ‘Jane Smith’ on the screen. Next, I learn about adding the constructor method into the component class to initialize the component. I changed the code in app.component.ts to:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
firstName: string;
lastName: string;
constructor() {
this.firstName = 'Jane';
this.lastName = 'Smith';
}
}
As we can see, whatever property of this can be shown in the corresponding HTML template if we put then between curly braces and without the this. So this.firstName in the component code becomes {{firstName}} in our HTML template. Likewise, we can display array items on the screen. The difference is that we have to use the *ngFor directive in our template to loop through the items and display them. To display a list of objects, first we have to create an interface to indicate the structure of the array entry that we want to display. We run ng g interface Person to create a Person interface in the person.ts file.
In person.ts, we replace the existing code with:
export interface Person {
name: string;
}
Then we go back to app.component.ts and change the file to:
import { Component } from '@angular/core';
import { Person } from './person';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
persons: Person[];
constructor() {
this.persons = [
{ name: 'Jane' },
{ name: 'John' },
{ name: 'Mary' },
]
}
}
In the code above, we have the names array, which is of type Person[] . It’s an array of Person objects, where Person is the interface that we just created. The Person interface specified that our Person object has the name property and it’s of type string.
Then we go to app.component.html and change it to:
<p *ngFor='let p of persons'>{{p.name}}</p>
Then we get:
Jane John Mary
displayed on the screen. In the code above, we have the following expression in our *ngFor directive:
let p of persons
p has the entry from the this.persons array in app.component.html and {{p.name}} returns the name property of p so that we can display the name from there.
Conditional Display with NgIf
Next, I learned how to conditionally display items with the *ngIf directive. It takes an expression that returns a truthy or falsy value. I changed app.component.ts to:
import { Component } from '@angular/core';
import { Person } from './person';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
displayName: boolean = false;
}
Then I changed app.component.html to:
<p *ngIf='displayName'>Jane</p>
Now I see nothing on the screen. I realized that this.displayName in app.component.ts set to false hides the name if we write *ngIf=’displayName’ . Then I set this.displayName to true in app.component.ts. Now I see the ‘Jane’ displayed without changing app.component.html . This means that the content is displayed if displayName is true.
Template Syntax
After looking at the Angular documentation, the curly braces is for interpolating data from our component file in our template. Anything between the double curly braces are interpolated. We can put any valid HTML in our template, along with variables, some expressions, and directive in our template code. I put expression straight into our template as follows:
app.component.html:
{{1 + 1}}
Then I see 2 on the screen. It evaluated the 1 + 1 expression and returned the result. However, I after trying other things like assigning variables, operators, chaining expressions with ; or ,, increment and decrement operators, I see that they all give me errors. Bitwise operators also didn’t work for me. Also, I discovered that I can define reference variables in templates to access the element directly.
I changed app.component.html to:
<label>
{{input.name}}:
<input #input name='foo'>
</label>
I see that foo: is besides the input box. So now I know that #input sets the name of my input element to input . Then I can access its DOM properties directly, as I did with input.name to get the value of the name attribute that I’ve set.
Conclusion
I learned the most basic parts of Angular by trying various constructs myself. I created the app by running the Angular CLI. First I tried to display component field values on the screen with double curly braces in the template. Then I tried playing with component class fields and basic directives like *ngIf to conditionally display content and *ngFor to display an array of items. Finally, I set an HTML element to a variable and then accessed its attributes directly in the template.
Repos:
https://bitbucket.org/hauyeung/angular-basic-app-1/src/master/
https://bitbucket.org/hauyeung/angular-basic-app-2/src/master/
https://bitbucket.org/hauyeung/angular-basic-app-3/src/master/
