Scribd
Upload
61 views

02-Configuring Your Angular Application

This document provides instructions for configuring an Angular application to use Angular Material and Flex Layout. It outlines steps to install necessary packages through npm, import modules, add Material icons, and introduce a toolbar component. After following the steps, developers will be able to use Angular Material components and Flex Layout in their application.

Uploaded by

skphero
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
61 views

02-Configuring Your Angular Application

This document provides instructions for configuring an Angular application to use Angular Material and Flex Layout. It outlines steps to install necessary packages through npm, import modules, add Material icons, and introduce a toolbar component. After following the steps, developers will be able to use Angular Material components and Flex Layout in their application.

Uploaded by

skphero
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Exercise (Instructions): Configuring your

Angular Application
Objectives and Outcomes

In this exercise we will set up our project to use Angular Material and Angular Flex Layout. We will
then introduce our first Angular Material component into our application. At the end of this exercise
you will be able to:

 Configure your Angular project to use Angular Material and Flex Layout.

 Start using Material components in your application.

Configure your Angular Project to use Angular Material

 To configure your project to use Angular material, type the following at the
prompt to install Angular Material, Angular Animations and HammerJS:

npm install @angular/[email protected]

npm install –save @angular/[email protected]

npm install --save @angular/animations

npm install --save hammerjs

Configure your Angular Project to use Flex Layout

 Next, install Angular Flex Layout as follows:

npm install --save @angular/flex-layout@latest

Configure to use Material Design Icons

 Next, include the following into the <head> of index.html to make use of
Material Design icons:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel

="stylesheet">
Updating AppModule

 Then, you need to import the Angular Animations Module, Angular Material
Module, Flex Layout Module and hammerjs into your root module
(src/app/app.module.ts) as follows:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MaterialModule } from '@angular/material';

import { FlexLayoutModule } from '@angular/flex-layout';

. . .

import 'hammerjs';

@NgModule({

. . .

imports: [

. . .,

BrowserAnimationsModule,

MaterialModule,

FlexLayoutModule

],

. . .

})

. . .

Adding a Material Toolbar

 Open app.component.html and replace its contents with the following


code:

<md-toolbar color="primary"> <span>Car Complex Catalog</span> </md-toolbar>

Adding Styles
 Add the following styles to styles.scss file:

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

// some basic resets

body {

padding: 0;

margin: 0;

font-family: Roboto, sans-serif;

 This will add a built-in Material theme to our application.

Conclusions

In this exercise we learnt to use Angular Material and Flex Layout NgModules in our Angular
application.

You might also like