Click here to Skip to main content
15,357,464 members
Articles / Web Development / ASP.NET / ASP.NET Core
Tip/Trick
Posted 26 May 2017

Stats

34.9K views
9 bookmarked

Adding Angular Material in ASP.NET Core Angular SPA Template

Rate me:
Please Sign up or sign in to vote.
4.84/5 (8 votes)
26 May 2017CPOL2 min read
This article shows you how to add Angular Material in ASP.NET Core AngularSpa template

If you are not familiar with ASP.NET Core SpaServices, take a look at this repository:

Lots of SPA templates (Angular, React, Vue, Aurelia, etc.) are available in this repo that use NodeServices for server side rendering. We will work with the AngularSpa template and add Angular Material in it.

To install the Spa templates via yeoman, first install the template generator with the following command:

npm install -g generator-aspnetcore-spa@next

Create a directory where you will initialize the template using yeoman. Run this command on the root of your created directory:

yo aspnetcore-spa

To install Angular Material, run the following command:

npm install --save @angular/material

When the installation is done, you will have to include the package (@angular/material) name in the vendor section of webpack.config.vendor.js file. Also you have to add a default Angular Material prebuilt theme to get rid of unwanted warning messages in the browser’s console. Modify the vendor section by adding the following two lines:

JavaScript
"@angular/material",
"@angular/material/prebuilt-themes/deeppurple-amber.css"

Image 1

N.B.: I’m using the deeppurple-amber theme. There are three other themes available in the @angular/material/prebuilt-themes directory. Use one of your like.

Now, you have to run webpack passing in the vendor script (webpack.config.vendor.js) as configuration flag (--config). Run the following command:

webpack --config webpack.config.vendor.js

Image 2

And you are good to go. Run the application and you should not face any issues.

Let’s see how we can add a md-button in the counter.component.html file. To do that, first you have to add the MdButtonModule from @angular/material package. Open up the app.module.client.ts; import MdButtonModule and add it to the imports array like this:

JavaScript
/* Other import statements */
import { MdButtonModule } from '@angular/material';

@NgModule({
    bootstrap: sharedConfig.bootstrap,
    declarations: sharedConfig.declarations,
    imports: [
        /* Other import modules */
        MdButtonModule
    ],
    providers: [
        { provide: 'ORIGIN_URL', useValue: location.origin }
    ]
})
export class AppModule { }

Almost done! Now open up the counter.component.html under ClientApp/app/counter and change the counter button syntax to the following:

<button md-raised-button (click)="incrementCounter()">Increment</button>

If you made these changes while in debugging process, then the project will automatically push the changes using webpack’s hot module replacement feature and you will see something like this on the browser window:

Image 3

Bonus: Adding Animation Module

Many people are having trouble working with the @angular/animation module and this is how you will apply hover animation on the Increment button:

Import the animation module (BrowserAnimationsModule) and add it to the imports array. Add it in the app.module.client.ts file.

JavaScript
/* Other import statements */
import { MdButtonModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    bootstrap: sharedConfig.bootstrap,
    declarations: sharedConfig.declarations,
    imports: [
        /* Other importes modules */
        MdButtonModule,
        BrowserAnimationsModule
    ],
    providers: [
        { provide: 'ORIGIN_URL', useValue: location.origin }
    ]
})
export class AppModule { }

N.B.: If you by chance add the @angular/platform-browser/animations module in the app.module.server.ts, you will get this 501 error message:

Image 4

This is because you are using server side rendering (SSR) and in server-side Angular Universal doesn’t let you access the document object of the browser.

Now that you have included the animation module, let’s use it in the counter.component.ts like the following:

JavaScript
import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
    selector: 'counter',
    templateUrl: './counter.component.html',
    styles: [`
        .myButton {
            background-color: purple;
            color: white;
        }

        .myButton:hover {
            background-color: orange;
            color: white;
        }
    `],
    animations: [
        trigger('hoverAnimation', [
            transition(':enter', [   // :enter is alias to 'void => *'
                style({ opacity: 0 }),
                animate(250, style({ opacity: 1 }))
            ]),
            transition(':leave', [   // :leave is alias to '* => void'
                animate(100, style({ opacity: 0 }))
            ])
        ])
    ]
})
export class CounterComponent {
    public currentCount = 0;

    public incrementCounter() {
        this.currentCount++;
    }
}

Add the .myButton class and the hoverAnimation attribute to the Increment button like the following:

HTML
<button md-raised-button class="myButton" (click)="incrementCounter()" 
[@hoverAnimation]>Increment</button>

And you are done! Run the application and you should get some hover animation on your button like this:

Image 5

Sample Repository Link

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Fiyaz Hasan
Architect Geek Hour
Bangladesh Bangladesh
Tech Enthusiast | Contributing Author on Microsoft Docs | Github Country Leader (C# and Typescript)

A .NET and JavaScript enthusiast. Likes to work with different technologies on different platforms. Loves the logic and structure of coding and always strives to write more elegant and efficient code. Passionate about design patterns and applying Software Engineering best practices.

I'm a young coder who did exceedingly well in my education and was offered an internship by Microsoft. I've tried a range of things and realized that what I need is a super creative challenge. I'm hungry for a real role in a challenging startup, something I can stick with for years

Comments and Discussions

 
BugThis no longer works. Pin
Member 1265092014-Sep-17 3:50
MemberMember 1265092014-Sep-17 3:50 
GeneralRe: This no longer works. Pin
Fiyaz Hasan27-Sep-17 6:48
professionalFiyaz Hasan27-Sep-17 6:48 
GeneralRe: This no longer works. Pin
Fiyaz Hasan10-Oct-17 7:58
professionalFiyaz Hasan10-Oct-17 7:58 
SuggestionFor those who have the newest version of VS 2017 Version 15.2 Please read below to see the fix. Pin
Johnson TONG Aussie27-Jul-17 19:21
MemberJohnson TONG Aussie27-Jul-17 19:21 
QuestionIE 11 Issue Pin
Member 1326987320-Jun-17 8:14
MemberMember 1326987320-Jun-17 8:14 
QuestionAdding toolbar and re-running Pin
Member 807559516-Jun-17 7:24
MemberMember 807559516-Jun-17 7:24 
AnswerRe: Adding toolbar and re-running Pin
Fiyaz Hasan17-Jun-17 0:59
professionalFiyaz Hasan17-Jun-17 0:59 
GeneralRe: Adding toolbar and re-running Pin
Member 807559517-Jun-17 5:51
MemberMember 807559517-Jun-17 5:51 
QuestionSimple and to the point Pin
Member 1166210930-May-17 4:58
MemberMember 1166210930-May-17 4:58 
PraiseNice article. Pin
Thiruppathi R28-May-17 20:45
professionalThiruppathi R28-May-17 20:45 
PraiseRe: Nice article. Pin
spottedmahn10-Oct-17 5:50
Memberspottedmahn10-Oct-17 5:50 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.