Understanding Angular and Creating your Second Application
I will purposely keep each part as short as possible while achieving a new goal in Angular.
In this article we will continue working with the default component, app.component.ts, but study the concept of components in more detail. We will also get started with data binding, the concept of injection and explore a previously unexplored file called app.module.ts; learning how to import modules (sub packages)we need to use.
Create a Project
Let’s start by creating a project and re-visit a few things from the prior article and then expand on them.
Feel free to open the project from Part One. It can be used for this article.
If you prefer to start a new one,
- Create a folder in which to store your application.
- Open VSCode and Open the folder you just created.
- (Optional) Install the Angular CLI. It is not necessary if you installed it Globally from Part One. Open a Terminal window and type,
npm install -g @angular/cli@latest
- Create a new project. I am going to use the same name as in Part One, learning-angular. Type
ng new learning-angular
- Navigate to the application folder, compile and start the development server by typing,
cd learning-angular
ng serve
- Open your browser using local host on port 4200.
http://localhost:4200
Recall from the prior article that an Angular application is created from components that you create that perform various tasks. At a basic level, these components are ultimately injected in to the app-root of the index.html file.
Components are like the basic building block in an Angular application. Components are defined using the @Component decorator. A component has a selector , template , style and other properties, using which it specifies the metadata required to process the component
In VSCode, re-examine the following files
- index.html. Notice the app-root. This is where the default component, app.component.ts (along with it’s metadata) is injected.
- app.component.ts. The default TypeScript component. Notice selector and template, in particular. The selector is app-root. Where to inject.
- app.component.html. The default component’s HTML. This is all the stuff you see by default when we just opened our browser.
How it all fits together is not difficult but a bit much for this article. However, you may want to start examining these files as well.
- app.modules.ts (we will use this later.)
- main.ts
Tracing through this you can get an idea of the bootstrapping process.
Working With Our Project
Making Some Changes
Note the css styling of the default application when run in the browser. This is all stored in the style tag of app.component.html. Shouldn’t the styling be in app.component.css? Let’s see.
Carefully select and cut all the style data between in the app.component.html and paste it into app.component.css.
You can delete the tags from app.component.html (make sure they do not exist in the app.component.csseither)
Save and notice in your browser, it looks the same.
This is because of app.component.ts and it’s styleUrls property.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'learning-angular';
}
Remember also, that title in here is passed to {{ title }} in the app.component.html. Use CTRL+F in app.component.html and search for
{{ title }}.
The use of {{ }} is for Interpolation (this is a form of data binding, e.g., title from app.component.ts to app.component.html) and Template Literals.
Change {{ title }} to {{ phrase }} in app.component.html and change title = ‘learning-angular’; 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 {
phrase = 'Angular Dev';
}
Save and notice the change in you browser.
Note: In TypeScript, you must have a space before and after the equal (=) sign.
Let’s modify app.component.html further by removing everything and typing only,
<div class="content">
<span>Hello {{ phrase }}</span>
</div>
Save and notice the change in your browser. All the styling, except that in the content class is gone.
use CTRL+F in app.component.css and search for the content class.
Add a font-size as follows,
.content {
display: flex;
margin: 32px auto;
padding: 0 16px;
max-width: 960px;
flex-direction: column;
align-items: center;
font-size: 25px;
}
Save and notice the change in your browser.
Using a Directive
Angular 9 Directives. Directives are instructions in the DOM. They specify how to place your components and business logic in the Angular. Directives are js class and declared as @directive.
The directive we will use is ngModel.
Angular NgModel is an inbuilt directive that creates a FormControl instance from the domain model and binds it to a form control element. The ngmodel directive binds the value of HTML controls (input, select, textarea) to application data.
or less formally,
ngModel is a directive which binds input, select and textarea, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during validations in a form.
and even less formally,
ngModel is responsible for: Binding the view into the model, which other directives such as input , textarea or select require.
This last definition points out the “Binding” in more detail but also the words “view” and “model”. You will hear that Angular uses a MVC (Model View Controller design pattern.)
What I would like to do is have an HTML wherein the user can input a phrase and have it display on the page in real time.
Modify you app.component.html as follows,
<div class="content">
Enter a phrase: <input type='text' [(ngModel)]='phrase' />
Hello, {{ phrase }}
</div>
Here we have told the ngModel directive to listen for changes to phrase and display them.
This alone is not enough, however. Even though ngModel is built in to Angular, we must import it and tell Angular to use it. This is done in the app.model.ts.
We will include a TypeScript import statement and add what was imported in the Angular imports array.
Open app.model.ts and add the new import statement and add the FormsModule to the imports array (in bold.)
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
You can read more about FormsModule here.
Save and you should be able to see the output on your browser as you type.
Result if using ngModel and binding it to phrase
Clean Up
We should clean up by closing or browser page and stopping our development server.
To stop the development server, in the Terminal of VSCode, type CTRL+C and hit Y and Enter.
Remember, you can always restart the development server by typing,
ng serve. And browse to it by typing http://localhost:4200.
Conclusion:
In this article we learned a bit about binding, directives and modules which lead us to app.modules.ts for the first time.
With this knowledge alone and a bit more reading, you can begin to add additional functionality to our simple application.
In future articles, we will take this further.
But for now, thanks for reading and enjoy exploring.
Resources:
Suggest:
☞ JavaScript Programming Tutorial Full Course for Beginners
☞ Learn JavaScript - Become a Zero to Hero
☞ E-Commerce JavaScript Tutorial - Shopping Cart from Scratch