How I Got Started with Angular and TypeScript

 

How I Got Started with Angular & TypeScript

How I Got Started with Angular and TypeScript

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:


Then I created my first Angular app project by running:


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:


I start by adding some fields to the AppComponent class, which changed the code to:


Then I went to app.component.html, which has:


generated by Angular CLI. I changed that to:


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:


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:


Then we go back to app.component.ts and change the file to:


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:


Then we get:


displayed on the screen.

In the code above, we have the following expression in our *ngFor directive:


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:


Then I changed app.component.html to:


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:


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:


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/

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles

11.02.2020

How to Create a Personal Blogging Website (Part-1)

In this article, we're going to create the back-end for our application using Flask, and in the next part, we'll be creating the front-end ...

13.01.2020

How to Upload Images to a Cloud Storage(Imgur) in an Angular Application

In this article, we're going to develop a simple Angular application which is used to add and display photos. This application will use Imgur to ...

13.02.2020

JavaScript find() and filter() Array Iteration Methods Made Easy

While this article will be more focused on making you understand these two array iteration methods, it will also create a fun, interesting and easy ...

No comments yet

Sign in

Forgot password?

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy