Angular Learning Day 2: Angular Fundamentals
Tags: angular, beginners, fundamentals
Published: 2020-12-09 16:27:29

---
title: Angular Learning Day 2: Angular Fundamentals
published: true
description: Angular Fundamentals
tags: angular, beginners, fundamentals
//cover_image: https://direct_url_to_image.jpg
---

**Objective**: In this article, you will know **Component**, 
**Templates**, **Directives**, **Services**, **Dependency Injection**

**Pre-requisite** Prior to completing this article, you should have already installed all pre-requisite tooling including: Visual Studio Code, Node Package Manager (NPM), Node, Angular CLI.

## Component 

* **Create** a component 
* **Register** it in a module
* Add an element in an **HTML markup** 

Step 1: After creating project, open the VS Code Editor Terminal and run `ng serve`

Step 2: Create a new Component **courses.component.ts**. This is the convention that be used angular building application. If the component have multiple word then separate them `course-form.component.ts` . Now creating a plain class

```
class CoursesComponent {

}
```
Once again look at naming convention. Here first letter of every word should be Capital and also by convention use the **suffix Component** in the name of class. 

So far this is a plain class. Not a component. Now convert to component we need to add some metadata that angular understand. We use a decorator. Firstly we need a decorator on the top. 

So Import - 

`import { Component } from @angular/core` 

This is the core library of the angular. Import the Component decorator. And need to apply. 

Now look at the syntax. 

```
@Component()
```
Like a function. This is called decorator function.  

```
@Component({

})
```
Pass an object. Have one or more properties tell angular how angular works. Ex: 

```
@Component({
  selector: 'app-courses',
  templateUrl: './courses.component.html',
  styleUrls: ['./courses.component.scss']
})
```
My selector for this component `app-courses`. This is a basic component in Angular. **My first step is done**. 

The second step is to **register this component in a Module**. 

The currently the application have only one module **app.moudle**. 

**app.module.ts** file 

```
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CoursesComponent } from './courses/courses.component';

@NgModule({
  declarations: [	
    AppComponent,
      CoursesComponent
   ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

```
Once again we have three import file. Nothing special here. 
Under bottom have **typescript** class. `export class AppModule { }` default **AppModule**

Know this is decorator function which another decorator function called **@NgModule**. 

```
@NgModule({
  declarations: [	
    AppComponent,
    CoursesComponent
   ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
```
And know this class is decorated another decorator function **@NgModule**. Plan typescript class **AppModule** convert as a Module **Angular Point of View**. 

Don't worry about all this properties here like **declarations** **imports** **providers** **bootstrap**. 

Focus on **declarations**. Here add all **Component** part of this module. 

By default when we generate a application we have one component called **AppComponent**.  

Now we can add **CoursesComponent** and import top on that file. 

`import { CoursesComponent } from './courses/courses.component';`

> Don't have .ts . No need. 

**Here second step is done**.

Now the third step. 

```
@Component({
  selector: 'app-courses',
  templateUrl: './courses.component.html',
  styleUrls: ['./courses.component.scss']
})
```
This is the selector for this component which means anywhere  we have an element like **app-courses** angular have render the template **courses.component.html** inside this **element(app-courses)**. This is the external template for appComponent. Let's have a look. 

**app.component.html** file

```
<h2>Angular Demo</h2>
<app-courses></app-courses>
```
So when angular see the element it's going to render the template of our courses component.   

**Output**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7znp29th38nrbya6thbg.PNG)

So this is how angular application works. 

**Note**: Short command for creating angular component in Terminal
`ng g c courses`

## Templates

We don't have any data or any logic. Define a field **title**

`title = "List of courses"`

Now display this title in our template dynamically. Angular have special syntax double curly braces `{{}}`. Use this render something in our template dynamically. 

So here put `{{title}}`. This expression will be value added. Added into DOM. 

**app.component.ts** file

```
import { Component } from '@angular/core';

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

  title = 'Angular practice title';
  courses = ['course1', 'course2', 'course3']

  getTitle(){
    return this.title;
  }

}
```

**app.component.html** file

```
<h2>Angular Demo</h2>
<div>{{title}}</div>
```

**Output**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c2ppidk7i0vdxxsk9kao.PNG)

This expression will be placed into the DOM. If we will change the value of title then angular automatically update the DOM. This is the beauty of Angular Framework. So this is the concept of **data binding**. 

So binding and view to a field in this component. Whenever the value changes then view automatically notified of data. 

Here we can also call a **method** in this class to get some value. 

Another example: 

```
<h2>Angular Demo</h2>
<div>{{getTitle()}}</div>
```
So special syntax here is call it **Interpolation**.  

**Output**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c2ppidk7i0vdxxsk9kao.PNG)

## Directives

**app.component.ts** file

```
import { Component } from '@angular/core';

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

  title = 'Angular practice title';
  courses = ['course1', 'course2', 'course3']

  getTitle(){
    return this.title;
  }

}
```
It's a simple object like `courses`. Now want to display this HTML Template.  

**app.component.html** file

```
<div>
    <ul>
        <li *ngFor="let course of courses">{{course}}</li>
    </ul>
</div>
```
Repeat this **li** for each course. Now for that need to use one of the angular building block called **directives** . We use directives to manipulate the **DOM**. Remove and existing DOM element, change to class name DOM element or style and so. 

So here you can use the special **directive** callded **ngFor** . Use it like an attribute HTML. So set it `""` string. So here we gone write some expression. We should use  **prefix** asterisk `*`. This is special syntax in Angular. So whenever we using a directive that modify is structure the DOM. 

`<li *ngFor="let course of courses">{{course}}</li>`

What does it mean. With the **let** keyword defining e variable. So the name of the variable is course. This is like a loop variable in JavaScript. So it going to iterate the courses field and each iteration this course variable will hold the value one course at a time. 

Now inside this list item want to display course. So once again use interpolation and add course variable here `{{course}}`

Let's look at the result. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vqug9gagz55ytvvx2ng0.PNG)

## Services

Now we have that list of courses. But in a real world application most of the time we get this course from the server. Here courses is hard coded. We need to call in **HTTP** end point get the list of courses. 

Here are two options. 
1. Logic for calling an HTTP service
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t3jknokkvqgbi2j4scmb.png)

but there are couple of problems with this approach. The first problem is that in future when we write the UNIT Test for this class we don't want to be dependent on live HTTP end point. Because this is may be harder to execute those UNIT Test. 

**app.component.ts** file

```
import { Component } from '@angular/core';

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

  courses;

}
```

**courses.service.ts** file

```
export class CoursesService{

    geCourses(){
        return ['course1', 'course2', 'course3'];
    }

}
```
Now imagine here in this method we have that logic for consuming a HTTP service. With this implementation we can reuse this class, we can reuse this logic in multiple places in our application. 

## Dependency Injection

Now we have a service. We need use this service. Get the list the courses from the server. Need to use this service in this component. first we need to add constructor. Here initial courses object. So here create initiate a service. 

**courses.component.ts** file

```
import { CoursesService } from '../courses.service';

export class CoursesComponent implements OnInit {

  constructor() {
    let service = new CoursesService;
   }
}
```
 

**courses.component.ts** Update file
```
import { Component, OnInit } from '@angular/core';
import { CoursesService } from '../courses.service';

@Component({
  selector: 'app-courses',
  templateUrl: './courses.component.html',
  styleUrls: ['./courses.component.scss']
})
export class CoursesComponent implements OnInit {

  courses;

  constructor() {
    let service = new CoursesService;
    this.courses = service.geCourses();
   }

  ngOnInit() {
  }

}
```
Now we have a service. Now we can initialize this courses field.

**courses.component.html** file

```
<p>
  courses work!
</p>

<div>
  <ul>
      <li *ngFor="let course of courses">{{course}}</li>
  </ul>
</div>
```
Let's look at the result. Same here.  

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vqug9gagz55ytvvx2ng0.PNG)
Wow. We get the same list. Looks Beautiful!. 

Bit updated **courses.component.ts** file

```
import { Component, OnInit } from '@angular/core';
import { CoursesService } from '../courses.service';

@Component({
  selector: 'app-courses',
  templateUrl: './courses.component.html',
  styleUrls: ['./courses.component.scss']
})
export class CoursesComponent implements OnInit {

  courses;

  constructor(service: CoursesService) {
    // let service = new CoursesService;
    this.courses = service.geCourses();
   }

  ngOnInit() {
  }

}
```

**providers: []** into **app.module.ts** file. Here have all register service. So at first register our **CoursesService**. 

**CoursesService** as a provider for **CourseComponent**

```
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CoursesComponent } from './courses/courses.component';
import { CoursesService } from './courses.service';

@NgModule({
  declarations: [	
    AppComponent,
      CoursesComponent
   ],
  imports: [
    BrowserModule
  ],
  providers: [
    CoursesService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

Let's look at the result. Same here.  

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vqug9gagz55ytvvx2ng0.PNG)

**Note**: If missing provider then showing bellow error. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hjfsq8o3lrss195wzghz.PNG)
So error is telling us that we have not register **CoursesService** as a provider in our module. 

> One more thing - when you register at dependency(CoursesService) in a module. Angular will create a single instant that class on entire module. So imagine in this module have hundred components and fifty of this component need **CoursesService**. In the memory we have a single instant of **CoursesService**. Angular will pass the same instant all this component. **This is about the called Singleton pattern**

So a quick review - 

Added **CoursesService** as a parameter in **constructor** or add a dependency injection in this class. And register this as a provider in our app module. 
 
```
 constructor(service: CoursesService) {
    this.courses = service.geCourses();
   }
```
With this implementation when angular is create a instant of this component. It will inject those dependencies into this constructor into this class.  


[Angular Learning Day 1: Component](https://dev.to/bipon68/angular-learning-day-1-component-479m)

**Reference**
[Create New Project](https://angular.io/guide/setup-local)

Thanks for reading. 

[Source](https://github.com/bipon68/angular-practice)