The Basics of Angular 7

In this post, we will be learning about the basics of Angular 7. Angular is an open-source JavaScript framework developed and maintained by Google and the community of Individual Developers. Angular 7 helps you to create SPAs (Single Page Applications) where you can build applications for the web, mobile or desktop.

Prerequisites of Using Angular 7

To get started with Angular 7, make sure that you have Node.js installed in your system along with npm package manager.

Learn More About Node.js

Installing the Angular CLI

Angular CLI can be used to speed up your Angular 7 development because it helps you to create projects, run the application and for testing, building, and deployment. You can install the Angular CLI using the below command

npm install -g @angular/cli

The above command installs the Angular CLI globally so that you can create your app from anywhere.

Learn More About NPM

Next is to create a new project which can be done using command ng new my-angular7-app, it prompts you to have some initial information, you can press enter to have all information as defaults. It installs all your necessary packages and dependencies and you need not have to worry about anything, it might take a few minutes. When you go inside the root folder named my-angular7-app or open it using the IDE (I use Visual Studio Code) you will find e2e subfolder (end-to-end test project), node_modules subfolder i.e. the dependencies of your project, src subfolder where all the code we write and other configuration files.

To run this newly created application, you need to go inside the subfolder using the command line and serve it as shown below

cd my-angular7-app
ng serve --open

The above command ng serve will launch the server on localhost:4200 and it also watches the file changes and rebuilds the application whenever you save a file.

How an Angular 7 Application get Started

The main entry point is index.html file which is a normal HTML file other than the <app-root> tag, which you can say is not a valid HTML tag. This tag is a way to tell the Angular app to load the App Component.

The tag is coming from app.component.ts file which has the selector name as app-root as shown below. Now that means when the Angular is loaded the <app-root> tag will be replaced with the app.component.html file which is fair enough because that is what we are seeing when we load localhost:4200.

What is Component

Components are the key features of Angular Framework where you can actually build up your whole application using a couple of components. The app component can be seen as the root component and we then add more components inside it. If I take codingdefined.com blog as an example, then header can be a component which contains the name, description and the meta information, the right panel can be component which holds the data of the right side of the page and left panel can be a component which displays the blog information.

The important advantage of using a component is that you can easily reuse the component and thus you do not have to write the same code again and again and just reuse the component whenever needed.

How to Create Component using Angular CLI

We can create the component using the ng cli using the below command

ng generate component my-component

OR

ng g c my-component

When you create the component, it usually creates four files style file (.css), template file (.html), typescript file (.ts) and test file (.spec.ts). The main file to look out for is the typescript file which has a @Component decorator that identifies the component class and specifies all the information about the component.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

The selector is nothing but a CSS selector that tells Angular to create and insert the instance of the component whenever it files the tag in the HTML, i.e. whenever it finds <app-root> tag in index.html or anywhere it will replace it with App View. templateUrl contains the template to rendered whenever the component instance is created, instead, you can also write inline HTML template using template property instead of templateUrl. styleUrls contains the style of the component i.e. the path to CSS file, alternatively, you can also write inline style using styles property instead of styleUrls.

Since in the above example we have used selector as a CSS selector, but you are not limited to that there are few more examples how you can use the selector. So instead of selector: 'app-root' to selector: ['app-root'] to change the CSS selector to an attribute selector, thus now instead of writing <app-root></app-root> we can write <div app-root></div> i.e. app-root is now being used as an attribute. Also we can change selector: 'app-root' to selector: '.app-root' to select by class, thus we can use it <div class="app-root"></div> to create the instance of the component.

Data Binding in Components

Data-binding is responsible for the communication between your template and the business logic in typescript code. There are different forms of communication, they are outputting data from typescript code to template using string interpolation and property binding, react to user events using event binding and the two way data-binding where both reacting to user events and outputting data are combined together.

String Interpolation - This is the easiest way to display a component property in teh template file. It binds the property name through interpolation where you have to put the property name in the view template inside double curly braces

{{myProperty}} or {{ getStatus() }}

Property Binding -  The property binding is nothing but setting an element property to a component property value for example I have a imageUrl created in my component so I can use the below code i.e. property binding ti bind the url with the src of the image tag

<img [src]="imageUrl">/<img>

Event Binding - Event binding is the way to call respond to the user events, for example calling a function when a user clicks on the button. You can bind to all the events which are made available to you by HTML attribute like, onmouseclick, onmouseenter, onclick etc. A simple example is

<button (click)="onClick()">Button<button>

The (click) identifies the button's click event whereas the onClick() is the component's method which will be clicked when the button is clicked.

One more thing to note here that you can also get user input from the $event object (it is a reserved variable name can be used in template for event binding), for example

<input type="text" (input)="onTestInput($event)">

And in the TypeScript we can get the value of the Input using the below function

onTestInput(event: Event) {
  console.log((<HTMLInputElement>event.target).value)
}

The event.target will give me the HTMLInputElement and the value will give me the current value of the textbox. The target is nothing but a reference to the element that has raised the event, in our case it is Input element.

Two-Way Binding - Two-Way Binding is the combination of Property Binding and the Event Binding and it is added in a single notation. We have to use ngModel directive to do two way data binding.

<input [(ngModel)]="myPropertyName" type="text" />

What the above code does is that the data property flows from the component to the input box with property binding and when we change the input value, the latest value flows back to the component as with event binding thus two-way data binding.