How to connect an Angular 2 component with an ASP.NET MVC view?

Question

I am trying to use Angular 2 with ASP.NET MVC, but cannot find a good way of mapping to a view to a component. Let's say I have a HomeController with an Index action and an Index.cshtml view. Inside the view I add an <home></home> element to be mapped to my Angular 2 component's selector.

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

@Component({
    selector: 'home',
    template: '<h1>Home component</h1>'
})
export class HomeComponent {
}

My component will not be triggered unless I add the component to the bootstrap property in my AppModule. This will cause my app to have several components inside the bootstrap property.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';

@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent, HomeComponent],
    bootstrap: [AppComponent, HomeComponent]
})
export class AppModule {
}

Is this the correct way to do it?

If I have another component's element selector inside a partial view, only my first partial view's component will be called. How do I make a component being called every time the partial view is rendered? Even if my partial view is rendered multiple times on the same page?

Jeet · Accepted Answer · 2016-09-12 09:05:41Z

2

You could add a template Controller which locate your correct view and render it.

Let see a sample, template Controller,

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNet.Mvc;

// For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860

namespace DemoApp.Controllers
{
    [Route("template")]
    public class TemplateController : Controller
    {
        [Route("{component}/{view}")]
        public IActionResult Get(string component, string view)
        {
            string path = string.Format("~/Views/{0}/{1}.cshtml", component, view);

            return PartialView(viewName: path);
        }

        [Route("{area}/{component}/{view}")]
        public IActionResult Get(string area, string component, string view)
        {
            string path = string.Format("~/Views/{0}/{1}/{2}.cshtml", area, component, view);

            return PartialView(viewName: path);
        }
    }
}

In your Angular2 Component, you could use template like following,

import { Component, Inject, OnInit } from '@angular/core';
import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms';

@Component({
    selector: 'overview',
    templateUrl: 'template/overview/index'
})
export class OverviewComponent {
}

I hope that helps you.

answered Sep 12, 2016 at 9:05

Jeet

2551 gold badge3 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tim Hardy Over a year ago

This no longer works in Angular 2. I guess that's the price of being on the bleeding edge.

Collectives™ on Stack Overflow

How to connect an Angular 2 component with an ASP.NET MVC view?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest