Learn Angular 9 with Tailwind CSS by building a banking app - Lesson 3: Display User Account Balance
Tags: angular, typescript, beginners, tutorial
Published: 2020-06-01 19:18:24

This article was originally published at https://www.blog.duomly.com/angular-course-with-building-a-banking-application-with-tailwind-css-lesson-3-user-account-balance

---

The previous week we've published the second lesson of our Angular 9 with Tailwind CSS tutorial, where we are building a banking app step by step. 

In the first lesson, we've created a project using Angular CLI, installed Tailwind CSS, and started building the first component UI, the login form. If you didn't start with us in lesson one, feel free to go back and start from scratch or just get the code from our Github.

<a href="https://www.blog.duomly.com/angular-course-building-a-banking-application-with-tailwind-css-lesson-1-start-the-project/">Angular Course - Lesson 1</a>

<a href="https://github.com/Duomly/angular9-tailwind-bank-frontend/tree/Angular9-TailwindCSS-Course-Lesson1">Lesson 1 Code</a>

In the second lesson, we've built a login logic, started from creating a service and connecting with backend API, through creating auth guard, finishing on creating an empty dashboard component. You can jump to this lesson as well.

<a href="https://www.blog.duomly.com/angular-course-building-a-banking-application-with-tailwind-css-lesson-2-login-form/">Angular Course - Lesson 2</a>

<a href="https://github.com/Duomly/angular9-tailwind-bank-frontend/tree/Angular9-TailwindCSS-Course-Lesson2">Lesson 2 Code</a>

And today we are going to continue our project and get user data after login to be able to display it in our dashboard component.

Of course, we've got a Youtube version for you as always, so if you prefer watching jump to our YT channel.

{% youtube AQ9OKiUIZ24 %}

Besides that, remember that you can follow our backend courses where you are able to write your own backend for this application in two different technologies: <a href="https://www.blog.duomly.com/category/golang/">GoLang</a> and <a href="https://www.blog.duomly.com/node-js-course-with-building-a-fintech-banking-app-lesson-1-start-the-project/">Node.js</a>.

Are you ready to start lesson 3?

###1. Create a new component###

Let's start our application and we will create a new component using Angular CLI. We will use the following command: 

```
ng generate component account-balance
```

When our component is ready, we would like to place it in the dashboard component. So, let's open `dashboard.component.html` file and add there the following code:

```html
<div id="dashboard-component" class="container mx-auto grid">
  <div class="flex mb-4 mt-24">
    <div class="mx-auto">
      <h3 class="text-gray-700 font-normal mx-auto">
        Hi User, here is your dashboard:
      </h3>
    </div>
  </div>
  <app-account-balance></app-account-balance>
</div>
```

Now, the component should be visible in our dashboard. So, we can start building the UI of the account-balance component. Let's start!

###2. Account Balance Component UI###

In this step, we will build a UI for the Account Balance Component. For this, we will use the Tailwind CSS card and we will add some additional classes.

Also, in this step we won't use data from API yet, we will hardcode the values like account balance or date.

So, let's open `account-balance.component.html` file and place there a following code: 

```html
<div id="balance-card" class="relative mx-auto max-w-sm rounded-lg overflow-hidden shadow-lg bg-white mt-5">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Current Account Balance</div>
    <p class="text-pink-500 text-5xl">
      100$
    </p>
    <div><img class="absolute bottom-0 right-0" src="../../assets/balance-account-image.png" /></div>
  </div>
  <div class="px-6 py-4">
    <span class="inline-block bg-gray-200 rounded px-3 py-1 text-sm font-semibold text-gray-700">Today is: 10.02.2020</span>
  </div>
</div>
```

I used in this code an image, which you can find in Github sources of this lesson.

Now, let's add some custom styles in the `account-balance.component.scss` file:

```scss
#balance-card {
  img {
    max-height: 150px;
  }
}
```

Great, our component looks pretty nice right now. If you managed to add an image you should see your application like in the image below.

![Duomly - Programming Online Courses - Angular Course](https://dev-to-uploads.s3.amazonaws.com/i/91e5qgwgtxfhrrhdr6b6.png)

Now, let's get user data from API.

###3. Get user data###

Let's start form getting the user's data in login function. Open `login.service.ts` file and add the following code.

```typescript
userSubject: any = new BehaviorSubject<any>(null);
user: any = this.userSubject.asObservable();

...

  login(Username: string, Password: string): any {
    this.http.post(this.url, { Username, Password }, httpOptions).toPromise().then((res: any) => {
      if (res && res.jwt) {
        sessionStorage.setItem('jwt', res.jwt);
        this.errorSubject.next(null);
        if (res.data) {
          this.userSubject.next(res.data);
        }
        this.router.navigateByUrl('dashboard');
      } else if (res.Message) {
        this.errorSubject.next(res.Message);
      }
    });
  }
```
We are passing `res.data` to the `user`, which is observable.

When it's ready let's go to the `dashboard.component.ts` file and let's define `user` value, then we will get the user data from `LoginService` in `ngOnInit()` method.

```typescript
import { Component, OnInit } from '@angular/core';
import { LoginService } from '../services/login/login.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
  user: any = null;

  constructor(
    private loginService: LoginService,
  ) { }

  ngOnInit(): void {
    this.loginService
      .userSubject
      .subscribe(user => {
        this.user = user;
      });
  }
}
```

Great, when it's ready, we can pass user data to the template!

###4. Display user data###

Let's open `dashboard.component.html` and we will use our user's name in the header, then we are going to pass the user's data to the `<app-account-balance>` component.

```html
<div id="dashboard-component" class="container mx-auto grid">
  <div class="flex mb-4 mt-24">
    <div class="mx-auto">
      <h3 class="text-gray-700 font-normal mx-auto">
        Hi {{user ? user.Username : ''}}, here is your dashboard:
      </h3>
    </div>
  </div>
  <app-account-balance [user]="user"></app-account-balance>
</div>
```

Now, let's open the `account-balance.component.ts` file and we are going to use `@Input` to access user data. Besides that, we will set the day of the current date to display it on the card.

```typescript
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-account-balance',
  templateUrl: './account-balance.component.html',
  styleUrls: ['./account-balance.component.scss']
})
export class AccountBalanceComponent implements OnInit {
  @Input() user: any;
  date = null;
  day = null;
  month = null;
  year = null;

  constructor() { }

  ngOnInit(): void {
    this.date = new Date();
    this.day = this.date.getDate();
    this.month = Number(this.date.getMonth()) + 1;
    this.year = this.date.getFullYear();
  }
}
```

We are almost there! The last step in today's lesson is to put the user's value and the data values in the `account-balance.component.html` file.

```html
<div *ngFor="let userAccount of user.Accounts">
  <div id="balance-card" class="relative mx-auto max-w-sm rounded-lg overflow-hidden shadow-lg bg-white mt-5">
    <div class="px-6 py-4">
      <div class="font-bold text-xl mb-2">Current {{userAccount ? userAccount.Name : 'Account'}} Balance</div>
      <p class="text-pink-500 text-5xl">
        {{userAccount ? userAccount.Balance : ''}}$
      </p>
      <div><img class="absolute bottom-0 right-0" src="../../assets/balance-account-image.png" /></div>
    </div>
    <div class="px-6 py-4">
      <span class="inline-block bg-gray-200 rounded px-3 py-1 text-sm font-semibold text-gray-700">Today is: {{day}}.{{month}}.{{year}}</span>
    </div>
  </div>
</div>
```
And voila! Our user's data is visible on the dashboard. In the next lessons we will learn how to ask for user's data after refreshing the page with our `jwt` token.

Congratulations!

###Conclusion###

If you didn't manage to get the code you can check out the code for this lesson on Github.

<a href="https://github.com/Duomly/angular9-tailwind-bank-frontend/tree/Angular9-TailwindCSS-Course-Lesson3">Angular Course - Lesson Three - Github Code</a>

Remember to take a look at our backend courses, so you can create back-end for this application using Golang or Node.js.

In the next lesson, we will create a registration process and other super interesting features!

Stay tuned and let us know in the comments if you like the course!

Thank you for reading,
Anna from Duomly

<a href="https://www.duomly.com">![Duomly - Programming Online Courses](https://dev-to-uploads.s3.amazonaws.com/i/01a8gh7ylvokvppehijg.jpg)</a>