Angular 10 Tutorial - Service

In this video we are going to learn about Service.
An Angular service is a stateless object and provides some very useful functions.
These functions can be invoked from any component of Angular, like Controllers, Directives, etc.
This helps in dividing the web application into small, different logical units which can be reused.
Alright now lets see how can we use services in angular 10.
First of all lets create service.
For that switch to the command prompt and run the command.


ng g service g user

Alright service has been created.
Now switch to the project and inside the app directory.
You can see the user.service.ts.
Inside this user.service.ts file and create a function.


getAllUsers() 
{ 
    return [ 
                {name:'Alice',email:'alice@gmail.com',phone:'1234567890'},
                {name:'Andrew',email:'andrew@gmail.com',phone:'1234567891'},
                {name:'Mike',email:'mike@gmail.com',phone:'1234567892'},
                {name:'Shopie',email:'shopie@gmail.com',phone:'1234567893'},
                {name:'Steve',email:'steve@gmail.com',phone:'1234567894'}
            ] 
}

Now save this service file and lets use this service into the component.
For that just go to the app.component.ts file and her just import the service first.


import {UsersService} from './users.service';

Now create a property and inside the constructor just write as following.


user = null;
constructor(private user:UsersService){ 
    this.users = this.user.getAllUsers();
}

Now lets print the user on html.
So just open app.component.html file and here write the following code.


<h2>All Users</h2>
<table> 
    <thead> 
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
        </tr> 
    </thead> 
    <tbody> 
        <tr *ngFor=\"let user of Users\">
            <td>{{user.name}}</td>
            <td>{{user.email}}</td>
            <td>{{user.phone}}</td>
        </tr> 
    </tbody> 
</table>