Angular Tutorial 201: Connect Angular and Spring Boot WS

A CodeMix eLearning Tutorial

Build a simple registration and login application using Angular for the frontend and connecting to a Spring Boot backend.

For a hands-on learning experience, an interactive version of this tutorial is included in CodeMix.

Try it Yourself

What is CodeMix eLearning? | Discover Other Tutorials | View Steps

# Angular 201: Connect Angular to Spring Boot WS

### 01

# Welcome to Angular with Spring Boot backend!

We already know that Angular is a powerful framework to create Single Page Web Applications, although, as a Java Developer, how do I deal with the Backend? In this tutorial we will try to do that with Spring Boot! We are going to build a simple Registration and Login Application.

# Pre-Requisites

1. CodeMix, you can find it in Eclipse Marketplace.
 2. Maven Integration for Eclipse, you can find it in Eclipse Discovery site.
 3. Spring Tool Suite, you can find it in Eclipse Marketplace.

Starting this tutorial will add a new project, `todo-tutorial` to your workspace.

Alternateively you can create a new Spring Boot project as follows:
`File -> New -> Project... -> Spring Boot -> Spring Starter Project`

### 02

# Modify Maven dependencies.

This application will use JWT to authenticate any calls to the REST endpoints and HSQL for the persistent storage. We need to make sure that the application has the proper libraries in the classpath. 
For this, open the pom.xml file and add dependency as follows:

```xml
<dependency>
	<groupId>com.auth0</groupId>
	<artifactId>java-jwt</artifactId>
	<version>3.4.1</version>
</dependency>
<dependency>
    <groupId>org.hsqldb</groupId>
    <artifactId>hsqldb</artifactId>
    <scope>runtime</scope>
</dependency>
```

Once the file is saved, Maven Integration for Eclipse will download the dependency. You can verify it under the project leaf `Maven Dependencies`, look for the java-jwt-3.4.1.jar entry.

### 03

# Hibernate configuration from application.properties

Under the hood, Spring Boot uses Hibernate as the ORM (Object Relational Mapping) provider. To persist your objects in the Database, we are going to use HSQL DB. Add the following lines:

Note: On Mac or Linux, switch to use the datasource URL for /tmp

```
# DataSource
spring.datasource.url=jdbc:hsqldb:file:C:/Windows/Temp/spring-boot-data
# USE ON MAC/LINUX spring.datasource.url=jdbc:hsqldb:file:/tmp/spring-boot-data

spring.datasource.username=sa

# Hibernate
spring.jpa.show-sql=false
spring.jpa.hibernate.ddl-auto=none
spring.jpa.properties.hibernate.enable_lazy_load_no_trans=true
```

### 04

# The Role JPA Entity

The Role class will be our first JPA Entity. These entities are just POJOs with some extra annotations over the class declaration and fields. At line 12, we have the `@Entity` annotation. So this is how a class is configured to be managed by the JPA ORM (in this case Hibernate).

At line 16 we have `@Id` annotation. It configures the field which will be used as the primary key of the DB table that represents this class. We can also configure JPA to automatically generate unique id for us using `@GeneratedValue(strategy = GenerationType.AUTO)` annotation.

Finally we have `@ManyToMany(mappedBy = "roles")` This is the Many to Many `target` relationship which describes relationship between the two JPA Entities.

The missing `User` class will be created in the next step.

### 05

# The User JPA Entity

Like the `Role` class this is just another JPA Entity and consists of all the standard code we saw before. However, we should take a look at how the `@ManyToMany` annotaion is declared. This is what we call the `source` of the relationship. We are also specifying how `@JoinTable` should be called and what will be the column names. Although this annotation is optional, JPA has it's default convention for how the Join Table gets named and it is a good practice to declare how we want this to be named.

### 06

# The Task JPA Entity

As you can see, the Task JPA Entity is just a `POJO` with some extra annotations, like our `Role` and `User` Entities. 
We are introducing here `@ManyToOne` annotation, so there can be more than one `Task` assigned to a given `User`. 
We can also configure how the column for this `foreign key`/`column` will be named in the database table.

### 07

# JPA Annotations

These annotations are from package `javax.persistence` and can be added to class declarations and fields.

## Class level annotations.

In the class declaration, we add `@Entity` annotation which tells JPA that this class is an Entity which can be persisted to a database table, and `@Table` which just describes the table name where the data is stored.

## Class field annotations

Each field is a column of the table. A field with the `@Id` annotation is the primary key of the table, and we indicate the Auto Generate strategy for this id.

The roles field of the `User` class is the one that is different. Here, we also indicate a table that will be used to correlate a user to it's roles and a given role to it's users by using `@JoinTable`, and the column names that will be used to make the relation between the two Entities, `User` and `Role`. Only the `source` of the relationship has to use `@JoinTable`. We've chossen `User` as the source of the relationship, and Role class as the `target`.

Notice `@ManyToOne` annotation for the field `user` in `Task` class. This annotation specifies a relationship between the `Task` entity (in this case the `source`) and the `User` class, although we don't need a Join Table here.

### 08

# Spring Boot JPA Repositories

To manage the persistence layer, Spring Boot provides the JpaRepository interface which our app needs to extend in order to access each entity. Each of our repository interfaces extend `org.springframework.data.jpa.repository.JpaRepository` which already provides some operations like `findById`. Take a look at each of the Repository interfaces that we have in our project.

To learn more about Spring JPA click <a href="https://docs.spring.io/spring-data/jpa/docs/current/reference/html/#repositories.core-concepts" target="_blank" rel="nofollow noopener">here</a>

### 09

# Spring Boot Controllers, REST Endpoints

Our Application will have 5 endpoints

1. `/users/sign-up` -> This endpoint will allow us to register new users who can login and subsequently make a request to `/` or any other endpoint you add.
 2. `/users/login` -> This endpoint is special and is tied to the JWT Authenticator once we configure the security later in this tutorial.
 3. `/tasks/list` -> This is used to get the list of tasks for the logged in user.
 4. `/tasks/update` -> Update or create a new task for the logged in user.
 5. `/tasks/delete` -> Delete a task from the logged in user.

# TasksController

Take a look at the class annotations `@RestController` and `@RequestMapping("/tasks")`. The first one is to instruct Spring Boot that this class will be used as a REST endpoint. The base route for any method in this class will be `/tasks`.

Each method has it's own `@RequestMapping` annotation with the route to it, and also the HTTP method used to get the method to the caller.

Feel free to implement the methods of this class. As a hint, this is the `getTasks` implementation.

```java
public ResponseEntity<List<Task>> getTasks(@RequestAttribute("user") User user) {
	user = userRepository.findById(user.getId()).get();
	return new ResponseEntity<List<Task>>(taskRepository.findByUser(user), HttpStatus.OK);
}
```

# UserController

We add the same annotations `@RestController` and `@RequestMapping` to the class and the required annotations to the methods of the class.

Feel free to implement the `register` method. This is how the password should be encoded:

```java
user.setPassword(bCryptPasswordEncoder.encode(user.getPassword()));
```

### 10

# Configure the Crypto Bean for your Spring Boot Application

In the previous steps we were using `@Autowire` annotation to explicitly tell Spring Boot application which instance to use with this annotated field of type `BCryptPasswordEncoder`. Add the following lines to `Application.java`

```java
    @Bean
    public BCryptPasswordEncoder bCryptPasswordEncoder() {
        return new BCryptPasswordEncoder();
    }
```

### 11

# Spring Boot Security with JWT Authentication/Authorization

To support authentication and authorization in our application we need to:

1. Implement an Authentication Filter which issues JWT token for the user sending credentials, that implements the /users/login endpoint.
 2. Implement an Authorization Filter to validate that any request to our endpoints contains a valid JWT token for the request to be authorized.
 3. Create a custom Implementation of UserDetailsService to help Spring security find and load a user from the data sent by the user on login.
 4. Extend WebSecurityConfigurerAdapter class to customize the security framework.

# AuthenticationFilter

The `JWTAuthenticationFilter` is how users will get authenticated. Look at how we define the `/users/login` endpoint in the constructor of the class. Within this class we are overriding two methods from the super class `org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter`.

## attemptAuthentication method

This method is invoked when a user tries to `login` and authentication is delegated to authenticationManager. 
In this method we just provide `User` details to the Spring Boot Security.

## successfulAuthentication method

Post `attemptAuthentication` method invocation, if user's credentials are correct, JWT token is created in this method which is then sent back to the client side.

### 12

# Spring Boot Security Authorization Filter

The Authorization filter is invoked just before accessing any of our endpoints to verify that the request has a valid JWT token on the `Authorization` header. We've added comments in the class about important parts of this implementation. Basically we read the `Authorization` Header, validate it and set the autorization object to the Spring Security context. The only additional thing we are doing is at line 68, where we set the `User` from the JWT claim as an attribute of the `HttpRequest` so that later `TasksController` can read it as argument injected by the `@RequestAttribute("user")` annotation.

### 13

# Spring Boot UserDetailsService

`UserDetailsService` is an interface of Spring Boot security framework. This is how our Application `User` model is mapped back to the Spring Boot Security `User`. As you can see we use `IUserRepository` to look for a user by email, load the roles and use those details to create `org.springframework.security.core.userdetails.User`

### 14

# Configure the UserDetailsService Bean of your Application.

Now we need to tell Spring Boot from where to grab `UserDetailsServiceImpl` which gets wired to the framework.

```java
	@Bean
	public UserDetailsServiceImpl userDetailsServiceImpl() {
		return new UserDetailsServiceImpl();
	}
```

### 15

# Spring Boot WebSecurity

Spring Boot uses `WebSecurityConfigureAdapter` to configure how Security is handled, which endpoints are filtered with the Authorization header (in this case our `JWTAuthorizationFilter`), whether to use Sessions or not. These are just some of the configurations you can specify.

The first thing to note is `@EnableWebSecurity` annotation in our `WebSecurity` class . This annotation will be used by Spring Boot Security to configure the class as `WebSecurityConfigureAdater`. We are also injecting a value from `application.properties` file, the jwtToken. To configure the specifics of our application we override some of the methods of the super class.

### 16

# Configure JWT Secret on application.properties

In the previous step we extended the class `WebSecurityConfigureAdapter` and we are using `@Value` annotation in it. During startup time, spring will inject the value from `application.properties` file to this class. We already have one but you can also change it to a different value.

### 17

# Configure JPA schema generations

Right now in our `application.properties` we have `spring.jpa.hibernate.ddl-auto=create`.

This is good for testing but if you are in production you may want to change it to some other value. A good option is `update` which does not drop the existing data in each run.

You can read more about this <a href="https://docs.spring.io/spring-boot/docs/current/reference/html/howto-database-initialization.html" target="_blank" rel="nofollow noopener">here</a>

### 18

# Build your Application jar file

Select the pom.xml file and open the context menu, and select `Run As -> Maven build`, specify _"clean install"_ as the Goals. A .jar file will be created inside the `target` directory.

You can run the application by running `java -jar com.codemix.spring.boot.tutorial-0.0.1-SNAPSHOT.jar` 
Just make sure that you are running with java 1.8 or later!

# Run from inside Eclipse

Alternatively you could run the Spring Boot Application from inside Eclipse, as a `Java Application` choosing `com.codemix.spring.boot.tutorial.Application` as the `Main class`. So open `Run Configurations -> Java Application` and create it and run.

### 19

# Introduction

Lets create a small Angular dashboard to connect to our Spring Boot backend that lets you register as a user and allows you to keep track of your Todos in a list. A project `todo-tutorial` is now added to your workspace.

Alternatively, you can create a new Angular project as follows:
`File -> New -> Project... -> Angular -> Angular Project`

### 20

# Modify Project Dependencies

The `package.json` has been updated with additional dependencies that are now needed for the project.

You need to run npm install to install the corresponding Node modules needed to properly work with Angular, including the command needed to serve the Angular application easily from development.

1. Type `npm install`
2. Press `Enter`

The Terminal+ view in CodeMix will automatically configure the Node and NPM versions for you. If you need to change this, you can at any time via project properties.

Node and NPM installation can take up to several minutes.

### 21

# Include custom styles on our angular cli application.

Lets modify the `angular.json` file to include some CSS files from the installed dependencies. Add following lines to the file.

```json
"styles": [
    "src/styles.scss",
    "node_modules/bootstrap/dist/css/bootstrap.css",
    "node_modules/nebular-icons/scss/nebular-icons.scss"
]
```

### 22

# Initial Application Routing

In this project we are going to use the Angular Router library, for which we need to declare the routes that our application can use. As you can see we are adding `auth` route having two child routes - `register` and `login`, each element in the children define the route and the componet. An important note here is how we tell the Module about these routes.

```typescript
@NgModule({
    imports: [RouterModule.forRoot(routes, config)],
    exports: [RouterModule]
})
```

### 23

# Setup AppModule

AppModule is the entry point of our application. If you look at index.html, it is the entry point of our angular application, since we declare the `app-root` component here. We are going to import here some of the libraries that we'll use in this application as well as  AuthStrategy from the Akveo component library.

Look at the `imports:` in `app.module.ts` file. We are adding some third party modules here. `NbAuthModule` lets us configure the API and endpoint strategy. For the backend API calls `login`, `register`, and `logout`, we specify the endpoint and method. You can also setup the token configuration here. 
 
### 24

# Change the App Component html

Now we have changed app.component.html content to have `<router-outlet></router-outlet>`. 
This is how components are displayed by routes.

### 25

# The PagesModule and Pages Component

Lets now add the `PagesModule`. The user will be directed to this module when logged in.

# PagesComponent

Right now we have the pages component with default content. Note that the `PagesComponent` is also declared in `pages.module.ts` declarations, look for: `declarations: [PagesComponent]`. It should only be declared in this component and not in `app.component.ts`

# PagesComponent html

We've also changed the default content of html to include `<router-outlet></router-outlet>` which is a component from the Angular Router. Here you'll see an error in the html editor, we'll fix it later.

### 26

# Create a new Module, the TodoModule

Lets add a new module `TodoModule`, which will contain the code that handles all the CRUD operations for the Tasks. Important things to note are `declarations:` and `imports:` declarations of the NgModule.

# TodoComponent

The TodoComponent has default content after component creation. After each component creation we have to verify that its declared in the right module, in this case, TodoModule `declarations: [TodoComponent]`

### 27

# The PagesRoutingModule

This is where we declare the routes that will be rendered by the router-outlet of PagesComponent. Take a look at how the routes are defined as well as the `imports:` and `exports` declaration of the Module.

```typescript
const routes: Routes = [{
  path: '',
  component: PagesComponent,
  children: [{
    path: 'dashboard',
    component: TodoComponent,
  }, {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full',
  }, {
    path: '**',
    redirectTo: 'dashboard',
  }],
}];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
```

### 28

# Initial contents for our PagesModule

Here we are going to modify `pages.module` to import the required libraries and also `PagesRoutingModule`. Take a look at the `imports:` declaration of the file.

### 29

# AppRoutingModule should lazy load the PagesModule

Now that we have the pages module we are going to let `app.component` know that it should load `PagesModule` when the route starts with the path `pages`. Add following lines to the file.

```typescript
    { path: 'pages', loadChildren: './pages/pages.module#PagesModule' },
```

### 30

# Setup Akeveo Library Styles Theme

With the `themes.scss` file we are doing the setup of the Akeveo theme. This is where you need to make basic style changes to the theme provided by the library. We are also modifying `styles.scss` which is the main stylesheet of our application. Here we import the themes file along with the akveo themes.

```scss
/* You can add global styles to this file, and also import other style files */
@import 'app/styles/themes';
// framework component themes (styles tied to theme variables)

@import '~@nebular/theme/styles/globals';
@import '~@nebular/auth/styles/all';
@import '~@nebular/bootstrap/styles/globals';

@include nb-install() {
  @include nb-theme-global();
  @include nb-auth-global(); // append the install mixin inside of the nb-install
};
```

### 31

# Prepare to run against our Spring Backend on Dev

At the root of the project, create a file named `proxy.conf.json`. 
We will use this to setup our Angular application (in the servers view) to run against our Spring Boot backend.

```json
{
  "/users": {
    "target": "http://localhost:8080",
    "secure": false
  },
  "/tasks": {
    "target": "http://localhost:8080",
    "secure": false
  }
}
```

### 32

# Setup to run our Angular Application

To run our application for the first time we need to modify the project properties in the <Servers view|view:org.eclipse.wst.server.ui.ServersView> as follows:
`Web Applications -> todo-tutorial -> Right Click -> Properties...` and update Custom 'ng serve' commmand argument to `--proxy-config proxy.conf.json`.

### 33

# Live Preview our application

Use `Live Preview` to see how the app looks like right now.

If you do not see the preview at the right of your editor, you can enable it by clicking the Live Preview toggle (or the eye icon) at the top right of the editor.

It will prompt to run the Angular server first, just accept the request and it will start the server and then display the preview.

Alternatively you can press ALT+COMMAND+E or right click on the editor and select Toggle Live Preview.

Live Preview will open on `http://localhost:4200`. For right now, you will only see a text like `todo works!`. 
If you navigate to `/#/auth/login` and `/#/auth/register` from the home page you will notice that the routes are already working!

Go ahead and register and login!

### 34

# Starting to layout our Dashboard

The layout module will have the base components of the dashboard UI, footer, header and the one-column component.
Lets import some of the Modules from the Akveo library.

```typescript
@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    NbThemeModule,
    NbLayoutModule,
    NbActionsModule
  ]
})
```

### 35

# The Footer of our Dashboard

We now have a new component, the `FooterComponent`. Lets make sure whenever a new component is created it is correctly added to the `declarations: []` of the `layout.module`

# Footer html and scss

Lets add some some basic html for the footer of the dashboard. Lets also adjust the component files of the footer by adding some html and scss code.

On `footer.component.html` file add the following:

```
<span class="created-by">CodeMix Todo List</span>
```

The `footer.component.scss` file has already been initialized for you, please take sometime to check it.

### 36

# The Layout Header Component

We now have a new component, the `HeaderComponent`

# Header html and scss

Lets just add some basic html for the header of the dashboard. We will get back to these a little later in the tutorial to add a logout button. Check the `header.component.scss` to check the styling we are adding for the component.

```html
<div class="header-container" [class.left]="true">
    <div class="logo">My Todos</div>
</div>

<div class="header-container">
</div>
```

### 37

# Layout OneColumnComponent

We now have a new component, the `OneColumnComponent`. Check the `exports:` field of the Module declaration _(file layout.module.ts)_ to make sure that the `LayoutModule` also exports the components that it declares.

This time the `OneColumnComponent` has some extra code, check how we are injecting the `NbThemeService` on the constructor of the Component.

```typescript
constructor(protected themeService: NbThemeService) 
```

# One Column Component html

Our one column component template _(file one-column.component.html)_ will use the `header` and `footer` components to render the layout for our dashboard. This is the one we will be adding to the `app.component.html` later.

```html
<nb-layout>
  <nb-layout-header fixed>
    <app-header></app-header>
  </nb-layout-header>

<nb-layout-column>
    <ng-content select="router-outlet"></ng-content>
  </nb-layout-column>

<nb-layout-footer fixed>
    <app-footer></app-footer>
  </nb-layout-footer>
</nb-layout>
```

# One Column Component scss

Our one column component also needs a bit of styling to get rendered correctly! Check the `one-column.component.scss` for more details.

### 38

# Import LayoutModule

We need to modify the `pages.module` and import the `LayoutModule` from the akveo library.

```typescript
import { LayoutModule } from './layout/layout.module';

@NgModule({
    imports: [
        LayoutModule,
        CommonModule,
        TodoModule,
        PagesRoutingModule
    ],
```

### 39

# PagesComponent html

Now lets apply the layout on the `pages.component.html` to render the header and the footer.

```html
<app-one-column>
    <router-outlet></router-outlet>
</app-one-column>
```

# Run the application on browser

With these changes you should start to see the dashboard taking shape. The next step is to guard this route so that you can only get here once you have logged in.

### 40

# Secure your routes

Angular guards are useful in instructing the Angular router framework when a given route should be activated. Guard file is already provided and You can see the file at `src/app/auth.guard.ts`. You can also create your own guard by using `File -> New -> Other... -> Angular -> Guard` or `ng g guard <file-name>` on the integrated terminal.

Our AuthGuard must implement `CanActivate` and `CanActivateChild`, the first one is used for single components while the `CanActivateChild` is used to verify the activation of a Module.

```typescript
	constructor(private authService: NbAuthService, private router: Router) {}
	
	...

canActivateChild(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        return this.authService.isAuthenticated().toPromise().then(
            (authenticated: boolean) => {
                if (authenticated && state.url && state.url.indexOf('/auth') >= 0) {
                    this.router.navigate(['pages/dashboard']);
                    return true;
                } else if (!authenticated && state.url && state.url.indexOf('/auth') < 0) {
                    this.router.navigate(['auth/login']);
                    return true;
                } else if (!authenticated && state.url && state.url.indexOf('/auth') >= 0) {
                    return true;
                }
                return authenticated;
            }
        );
    }
```

As you can see we are injecting the `NbAuthService` and the `Router` service on our `AuthGuard`. Inside our `canActivateChild` funcion we use the authservice to verify that the user is authenticated and if not, we use the `Router` to navigate to the `login` route.

### 41

# Provide the AuthGuard

Add the AuthGuard to the providers field of the Module declaration. We also need to export the NbAuthModule from the Akveo library since the child modules will use it.

```typescript
providers: [
    { provide: APP_BASE_HREF, useValue: '/' },
    AuthGuard
],
exports: [
    NbAuthModule
]
```

### 42

# Logout action

Now lets modify the `header.component.ts` file. We will inject the router object and the `NbAuthService` on the constructor and create a method that will be invoked on logout.

```typescript
    constructor(private authService: NbAuthService, private router: Router) { }
       ...

logout() {
        this.authService.logout('email').subscribe(
            (_void) => {
                this.router.navigate(['/auth/login']);
            }
        );
    }
```

# Logout Action html

Now we need the html modifications to get the action rendered on the html. You can check the following code on `header.component.html`file.

```html
<div class="header-container">
  <nb-actions size="medium" [class.right]="true">
    <nb-action icon="nb-person" (click)="logout()"></nb-action>
  </nb-actions>
</div>
```

### 43

# The Task Model

The Task Model is similar to the one we had declared on the Spring Boot backend. This file is located at `src/app/todo/model/Task.ts`.

```typescript
export class Task {
    id: number;
    task: string;
    user: any;
}
```

### 44

# Tasks CRUD Service

We now have a new service called the `TodoService` that will be used to interact with our backend to do CRUD operations to the user Tasks.

You can crete a service either from the Angular IDE `File -> New -> Other... -> Angular -> Service` or from the terminal `ng g service pages/todo/todo`.

Make sure the Service is declared on the `todo.module.ts`.

```typescript
@NgModule({
  declarations: [TodoComponent],
  imports: [
    CommonModule,
    HttpClientModule,
    NbCardModule,
    NbActionsModule,
    FormsModule
  ],
  providers : [
      TodoService
  ]
})
```

### 45

# Implement TodoService

Lets inject the Angular `HttpClient` and the Akveo `NbAuthService` to our service. Once we have these services available we can implement our business logic. Note how we are adding the headers so the backend accepts and validates the request using the jwt token at the `getRequestOptions` function.

```typescript
    constructor(private http: HttpClient, private authService: NbAuthService) { }

public createTask(task: string): Observable<HttpEvent<Task>> {
        return this.authService.getToken().pipe(mergeMap(
            (token: NbAuthToken) => {
                return this.http.post<Task>(
                    '/tasks/update', '{ "task" : "' + task + '" }', this.getRequestOptions(token)
                );
            }
        ));
    }

...

private getRequestOptions(token: NbAuthToken): any {
        return {
            headers: new HttpHeaders({
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + token.getValue()
            })
        };
    }
```

### 46

# We need a CreateTodoComponent

We now have a new component called the `CreateTodoComponent`. Lets make sure the new component is correctly added to the `declarations: []` field of the `todo.module`.

# Use TodoService on CreateTodoComponent

This is where our Angular Application will create a new Task for the logged in user.

```typescript
    constructor(private todoService: TodoService, private router: Router) { }

...

createTask() {
        this.todoService.createTask(this.task).subscribe(
            (task) => {
                this.router.navigate(['dashboard']);
            }
        );
    }

showList() {
        this.router.navigate(['dashboard']);
    }
}
```

# The html and styles of our create Todo component

We are just creating an html input where we are binding the task field of the component to the text that the user types using the `[(ngModel)]="task"`. We also are adding a way to show the list of our already existing `Tasks`

# html

```html
	<nb-actions size="medium" [class.right]="true">
		<nb-action icon="nb-arrow-left" class="toggle-layout" (click)="showList()"></nb-action>
	</nb-actions>
    
    ...
    
    <input type="text" class="form-control" id="task" placeholder="task" [(ngModel)]="task">
      
```

### 47

# A Component to display each Todo

We now have a new component, the `TodoEntryComponent`, when we create the component we have to check that it is correctly added to the `declarations: []` of the `todo.module`.

This component will render the information about the task and will also have an action to delete the task from the user list. In here we are also injecting the `TodoService` and configuring an `Input` and an `Output` of the component.

```typescript
export class TodoEntryComponent implements OnInit {

@Input()
    public task: Task;

@Output()
    public refresh: EventEmitter<number> = new EventEmitter<number>();

constructor(private todoService: TodoService) { }

...

deleteTask() {
        this.todoService.taskDelete(this.task).subscribe(
            (_void: any) => {
                this.refresh.next(Math.floor(Date.now() / 1000));
            }
        );
    }
}
```

# Todo Entry html

The todo entry html is how we print the task name and the action to delete the task.

```html
  <div class="col-md-11">
    {{task.task}}
  </div>
  
  ...
  
  <nb-action icon="nb-trash" (click)="deleteTask()"></nb-action>
  
```

### 48

# Start to glue all Todo Components

First lets add the tasks field to the Component ts file. This will be used by the html to render our tasks. Note that we are using a BehaviorSubject for it.

We are also adding the `refresh()` method that will be invoked from the `ngInit` method.

```typscript
    constructor(private todoService: TodoService, private router: Router) { }

ngOnInit() {
        this.refresh();
    }

addTask() {
        this.router.navigate(['/pages/create-task']);
    }

refresh() {
        this.todoService.tasksList().subscribe((tasks: HttpEvent<Task[]>) => {
            if (tasks) {
                // @ts-ignore
                this.tasks.next(tasks);
            }
        });
    }
```

# Todo Component html

Now we need the html changes to display our tasks. Whats new here are the `*ngFor` and the `async` pipe that are used on the tasks field of our component since it is an `rxjs/subject`. Also note how we are using the app-todo-entry and the `input[]`/`output()`

# HTML

```html
	...
	<nb-action icon="nb-plus" class="toggle-layout" (click)="addTask()"></nb-action>
    ...
    <div *ngFor="let next of (tasks | async)" class="row show-grid grid-table">
          <div class="col-md-12">
    			<app-todo-entry [task]="next" (refresh)="refresh()"></app-todo-entry>
    		 </div>
   	</div>
    ...
```

We also want to add additional css to properly render the list. Checkout the `todo.component.scss` file!

### 49

# Add the TodoComponent to the PagesRoutingModule

Now we just added the `create-task` route to the `PagesRoutingModule` so that when the `TodoComponent` navigates to this route, Angular knows what components to display.

```typescript
const routes: Routes = [{
  path: '',
  component: PagesComponent,
  children: [{
    path: 'dashboard',
    component: TodoComponent,
  }, {
    path: 'create-task',
    component: CreateTodoComponent
  }, {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full',
  }, {
    path: '**',
    redirectTo: 'dashboard',
  }],
}];
```

### 50

# You now have built the Todo Application!

Time to test your Angular application now. Go ahead and try it on the browser!

What is left on this project is to bundle the angular distribution build within the Spring Boot jar file which is a bit out of scope for this tutorial. We strongly encourage you to investigate how to bundle your application in a single jar <a href="https://www.upnxtblog.com/index.php/2018/09/07/how-to-deploy-angular-6-spring-boot-app-as-single-deployment-unit/" target="_blank" rel="nofollow noopener">here</a>

### 51

# Nice Job!!!

You've finished the Angular 201 tutorial. As you are learning Angular, why not check out <a href="https://angular.io/docs" target="_blank" rel="nofollow noopener">Angular Docs</a> for good examples of challenges you may face.

Explore other <a href="https://www.genuitec.com/elearning/" target="_blank">Angular</a> courses.