MEAN app with Angular 4 (Part 3) Displaying the data using Angular Material

In this article we will be using Angular Material to display the data in the front end. In installing angular material it is good to follow the instruction in their website. You can read the instruction in Angular Material getting started page.

Setting up Angular Material

Open your angular project using your visual studio code editor to install the angular material. In time when I write this article you can install angular material by using this command.

npm install --save @angular/material @angular/cdk

After installing angular material, we need to register angular material modules to angular. To do that follow the number 3 instruction in Angular Material getting started page.

step 3 for adding angular material

Base on the instruction we can add angular material component by adding each component to import in app.module.ts. You can see the different angular components here. We also need to import NoopAnimationsModule for animation base on step 2. Now let’s add the components that we are going to use in this tutorial.

import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule, MatInputModule, MatButtonModule,
  MatToolbarModule, MatCardModule, MatDatepickerModule,
MatNativeDateModule } from '@angular/material';

Finally we add them in NgModule imports .

@NgModule({
  declarations: [
    AppComponent, EventsComponent
  ],
  imports: [
    BrowserModule, HttpModule, MatFormFieldModule,
    MatInputModule, MatButtonModule, MatToolbarModule,
    MatCardModule, NoopAnimationsModule, MatDatepickerModule,
MatNativeDateModule
  ],
  providers: [AppService],
  bootstrap: [AppComponent]
})

The lasting we need to do is to add the angular material css in our project. To do that follow the instruction number 4 in Angular Material getting started page.

step 4 for adding angular material

Open your style.css which is under the src folder. Then copy paste this line on it.

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Now we are ready to use the angular material. Let’s create a new component for our events. Create a new file inside the app folder called events.component.ts then copy and paste this code.

import { Component } from '@angular/core';
import { AppService } from './app.service';

@Component({
  selector: 'events',
  templateUrl: './events.component.html'
})
export class EventsComponent {

  constructor( private appService: AppService) {}

  ngOnInit() {
    this.appService.getEvents();
  }
}

What we did was create a new component which you can use in your html page by using the events tag. Then we inject the AppService in the constructor and call the appService.getEvents function inside the ngOnInit.

We set the template of this new component to use events.component.html. So create that file now inside the app folder.

Then copy and paste this code.

<div *ngFor="let event of appService.events">
    <mat-card>{{event.title}}</mat-card></div>

In the code above we use for loop to display events using card component.

Now go to your app.component.html and change your code to look like the code below.

<mat-toolbar>
  Event App
<span style="flex: 1 1 auto"></span>
<button mat-button color="primary">Add Event</button>
</mat-toolbar>
<events></events>

Run your project to see the result.

ng serve --open

Now your page should look like this.

displaying the events data

Related Articles

Source Code

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s