ng : Add New Component to .NET Core SPA Template

.NET Core 2.0 is shipped with SPA templates – formerly known as Microsoft.AspNetCore.SpaTemplates – so you don’t need to run dotnet new --install Microsoft.AspNetCore.SpaTemplates::*. Just upgrade to .NET Core 2.0. you’ll see the beauty.

All you need to do is
dotnet new angular -o firstapp
and
npm install
inside the newly created firstapp. It will create something like below.

firstapp.PNG

Here the ClientApp is the ng app.

But this has a limitation that the Angular template does not come with angular-cli support and it does not even have a .angular-cli.json (at-least for now). It’d be easier to generate new components and modules if we have that support as well. But surely you can add it the .angular-cli.json by changing its "root" to refer ClientApp with some other tweak and make it work. But in this post I am about to discuss how we can add a new ng component to the application without going in the angular-cli way.

Microsoft had to create a different structure than what is there in angular-cli. But for this, I thought to stick with the Microsoft’s pattern. Here they have components residing inside ClientApps/app/components, also spitted the app.module to three files, “app.module.browser.js”, “app.module.server.js” and “app.module.shared.js”. This is mainly for the server-side prerendering and stuff – its so cool.

Now if you see the template, you will see 4 components with the app component.

components

so, if you just run this

app

I want to add a new component and make it visible via navigation menu. I actually want to create a component for reverse counting.

Create a new folder inside ClientApp/app/components called “reverse-counter” and create two files “reverse-counter.component.ts” and “reverse-counter.component.html”

Open theĀ “reverse-counter.component.ts” and add the below

import { Component } from '@angular/core';

@Component({
    selector: 'reverse-counter',
    templateUrl: './reverse-counter.component.html'
})
export class ReverseCounterComponent {
    public currentCount = 10000;

    public decrementCounter() {
        this.currentCount--;
    }
}

Logic is pretty obvious here. Add the “reverse-counter.component.html” as well with the below code

<h1>Reverse Counter</h1>

<p>This is a simple example of anpther Angular component.</p>

<p>Current count: <strong>{{ currentCount }}</strong></p>

<button (click)="decrementCounter()">Decrement</button>

We have successfull “created” the basic component. Now we need to configure the component to the application module, open “app.module.shared.ts” and add

import { ReverseCounterComponent } from './components/reverse-counter/reverse-counter.component';

under all imports and add ReverseCounterComponent declaration and in the RouterModule.forRoot add below entry

{ path: 'reverse-counter', component: ReverseCounterComponent},

may be right after the entry for counter component – so will be easier for understanding.

Finally, add the router link to the navmenu component – to make the newly added component accessible via nav menu.

<li [routerLinkActive]="['link-active']">
	<a [routerLink]="['/reverse-counter']">
		<span class='glyphicon glyphicon-education'> Reverse Counter
	

 

Thats all: finally webpack, build and run the application,
reverse-counter.png

Happy Coding.

Advertisements

3 thoughts on “ng : Add New Component to .NET Core SPA Template

  1. Useful information. Fortunate me I discovered your site by chance, and I’m surprised why this twist of fate did not happened earlier! I bookmarked it.

  2. I do accept as true with all the concepts you have introduced in your post. They’re really convincing and will certainly work. Still, the posts are too brief for beginners. May you please extend them a bit from next time? Thank you for the post.

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 )

Connecting to %s