Angular Material

-

What is AngularJS Material?

AngularJS Material is both a UI Component framework and a reference implementation of Google's Material Design Specification.

Step 1: Install Angular Material

npm install --save @angular/material

Step 2: Animations

Some Material components depend on the Angular animations module in order to be able to do more advanced transitions. If you want these animations to work in your app, you have to install the @angular/animations module and include the BrowserAnimationsModule in your app.

npm install --save @angular/animations
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; 
@NgModule({ 
...
 imports: [BrowserAnimationsModule],
 ... 
}) 
export class PizzaPartyAppModule { }


If you don't want to add another dependency to your project, you can use the NoopAnimationsModule.

import {NoopAnimationsModule} from '@angular/platform-browser/animations'; 
@NgModule({
 ... 
imports: [NoopAnimationsModule],
 ... }) 
export class PizzaPartyAppModule { }

Step 3: Import the component modules


Import the NgModule for each component you want to use:

import {MdButtonModule, MdCheckboxModule} from '@angular/material'; 
@NgModule({
 ... 
imports: [MdButtonModule, MdCheckboxModule], 
... 
})
 export class PizzaPartyAppModule { }


Alternatively, you can create a separate NgModule that imports all of the Angular Material components that you will use in your application. You can then include this module wherever you'd like to use the components.

import {MdButtonModule, MdCheckboxModule} from '@angular/material'; 
@NgModule({ 

imports: [MdButtonModule, MdCheckboxModule], 
exports: [MdButtonModule, MdCheckboxModule], 

}) 
export class MyOwnCustomMaterialModule { }


Whichever approach you use, be sure to import the Angular Material modules after Angular's BrowserModule, as the import order matters for NgModules.

Step 4: Include a theme


Including a theme is required to apply all of the core and theme styles to your application.

To get started with a prebuilt theme, include the following in your app's index.html:

<link href="../node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

Note that your app's project structure may have a different relative location for your node_modules.

Step 5: Gesture Support


Some components (md-slide-toggle, md-slider, mdTooltip) rely on HammerJS for gestures. In order to get the full feature-set of these components, HammerJS must be loaded into the application.

You can add HammerJS to your application via npm, a CDN (such as the Google CDN), or served directly from your app.

To install via npm, use the following command:

npm install --save hammerjs


After installing, import it into your app's root module.

import 'hammerjs';


Step 6 (Optional): Add Material Icons


If you want to use the md-icon component with the official Material Design Icons, load the icon font in your index.html.

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

Sample app : https://github.com/jelbourn/material2-app

Reference


Comments

Post a Comment

Popular posts from this blog

CSRF Token-Synchronizer Token Patterns

-
Image
Cross-site Request Forgery Protection in web applications via Synchronizer Token Patterns What is Cross-site Request Forgery Protection(CSRF)? This is a kind of attack and type of a malicious exploit of a website. We also name this attack as the one-click attack or session riding. This forces an end user to execute unwanted actions on a web application in which they're currently authenticated. This attack is mainly focusing on state-changing request, not theft data. As an example, if the user 'A' wants to transfer the 200$ to the bank 'B'.He needs to send a request to the bank 'B' and bank will send the response by authenticating user 'A'.There is an attacker he/she needs to fraud this money form user 'A'.what the attacker can do is he will create a malicious web link and send it to the user by forcing to click that link . while the user clicks the link for the transferring purpose but the thing is attacker was transferring the mon...
Read more

CSRF token - Double Submit Cookies Pattern

-
Image
Cross-site Request Forgery Protection in web applications via  Double Submit Cookies Pattern What is Cross-site Request Forgery Protection(CSRF)? This is a kind of attack and type of a malicious exploit of a website. We also name this attack as the one-click attack or session riding. This forces an end user to execute unwanted actions on a web application in which they're currently authenticated. This attack is mainly focusing on state-changing request, not theft data. As an example, if the user 'A' wants to transfer the 200$ to the bank 'B'.He needs to send a request to the bank 'B' and bank will send the response by authenticating user 'A'.There is an attacker he/she needs to fraud this money form user 'A'.what the attacker can do is he will create a malicious web link and send it to the user by forcing to click that link . while the user clicks the link for the transferring purpose but the thing is attacker was transferring th...
Read more

Cloud Computing

-
Image
Cloud Computing What is Cloud Computing In the simplest terms, cloud computing means storing and accessing data and programs over the Internet instead of your computer's hard drive. The cloud is just a metaphor for the Internet. It goes back to the days of flowcharts and presentations that would represent the gigantic server-farm infrastructure of the Internet as nothing but a puffy, white cumulus cloud, accepting connections and doling out information as it floats. Usage of Cloud Computing 1. Infrastructure as a service (IaaS) and platform as a service (PaaS)   When it comes to IaaS, using an existing infrastructure on a pay-per-use scheme seems to be an obvious choice for companies saving on the cost of investing to acquire, manage and maintain an IT infrastructure. There are also instances where organizations turn to PaaS for the same reasons while also seeking to increase the speed of development on a ready-to-use platform to deploy applications. 2. Priva...
Read more