She works with an IT major. Normally she doesn't speak much but when she speaks, I bet she can make you speechless. Total nerd and travel buff Tuba can be seen passionately doing gyms, Netflix or sharing experiences through excellent blogs. If not then you can find her learning something new. Yes, She knows 4 languages – English, Hindi, Marathi, and German.
PDF and printable version of this article of the Angular Tutorial for Beginners series is available here for download.
In the first part of the Angular Tutorial for Beginners series we discussed how to get started with Angular.
In this part of the Angular tutorial for Beginners series, we will discuss Modules, Components & Directives in Angular.
Modules
A module in angular is a group of components, directives, services etc. We will be having a look at each of these terms soon. Basically think of module as a group.
By default we will have a file app.module.ts generated as below. It will be decorated with the directive @NgModule, which tells angular all the components, directives etc. that we will be using in our module.
App.module.ts file will list all the other modules and components that are imported. You will find that the first three lines import external modules. The Browser module is imported from the platform-browser package situated in the src folder. The second line imports the NgModule that is required because we are using the directive @NgModule. The third line imports the AppRoutingModule, which we will discuss when we learn about routing.
These external modules that are imported are mentioned in the imports section.
The fourth import, imports AppComponent. This is a component that is present in our current module. Hence it is mentioned in the declaration section.
You will find that underneath the providers, there is bootstrap mentioned. This specifies angular to load AppComponent at startup.
Where AppComponent declared? Goto app.component.ts file and you will find it there.
Remember how we discussed angular is a single page application? This page is index.html. If you navigate to the index.html, which is your default page, it will have <app-root><app-root>.
This app-root can be found below:
So basically, angular knows that it has to show AppComponent on startup.
Before we move on to Components, can we create multiple modules in our application? Yes sure we can. We will always have a root module, which will be starting module and the other modules will be called feature modules. To use them, you have to import them first in you root module.
When we have a huge application, it is a good idea to have multiple modules for implementing different functionalities. A shared module can be created for housing shared functionalities,
Components
Components is the view, similar to the view that we have in MVC architectures. It will consist of template(html) + class (properties,methods written in Typescript) and metadata (some extra information).
Goto app.component.ts
Here you have an AppComponent class in typescript. You also have a templateUrl that specifies the html for the view and the rest is all metadata.
Lets create a component Employee.
You can create it by writing the following command in the CLI. For this create a new terminal.
ng generate component employee
This will create a new component employee. Angular will create four files for you as part of the component:
Also when we had created the employee component through angular CLI, angular registered our component class in the root module as below:
Directives
Directives help structure and modify your DOM. There are three types of directives in angular:
Components:
The templates in components structure your DOM. We have already seen them.
Structural Directives:
Change the layout of the DOM. For example we have ngIf and ngElse statements that help decide whether to display a particular element or not.
Now lets create an employee class as follows. We don’t know its type, so we have defined it as an array of any type. We can create an employee class separately and we could have defined employees as an array of that class. But for our demo purpose, we don’t need it.
Before we display employees in our view, lets add bootstrap, so that we can get a responsive UI. This can be done easily by typing in the following command:
npm install bootstrap
Before we can use bootstrap classes in our employee.component.html, we need to import the styles in style.css as below:
@import "~bootstrap/dist/css/bootstrap.min.css"
Write the following code in employee.component.html:
Employee List
Employee Id
Employee Name
Project Id
{{employee.employeeId}}
{{employee.employeeName}}
{{employee.projectId}}
**Note: Please add the *ngIf & *ngFor to the above code block while copying the above piece of code block as shown in the screenshot below.
Here we have used two structural directives : ngIf & ngFor. If employees exists in the employee.component.ts file and it’s length is more than 0, then the table will be displayed. Also we have used the ngFor structural directive to loop over the employees.
Structural directives always begin with an ‘*’.
We also need to add the employee component directive to app.component.html as below, so that it is displayed in the browser.
<app-employee></app-employee>
The directive ‘app-employee’ is mentioned in the metadata of employee.component.ts:
Now lets go to our browser. We can see a table displayed as below:
Attribute Directives
These are directives that change the appearance or behaviour of a DOM element. For example : ngStyle.
The above condition will apply a particular style after evaluating a particular expression. If the projectId is 101, the background for the column will be green else red. Our browser will look as below:
To know more about modules, components & directives in Angular, you can find some excellent documentation on the official angular site.
This was all about directives. Lets proceed to understand the different types of data bindings in Angular in the next part of the Angular tutorial for Beginners series.
PDF and printable version of this article of the Angular Tutorial for Beginners series is available here for download.
Contents of the Angular tutorial for Beginners series:
