How to pass mvc view in template url in type script file in angular 4

Question

i am using angular 4 in mvc architecture . wheneve i gona pass mvc view in template url in the app.component.ts file it shows some error. can i pass the mvc view in the type script file or i have to create a html file in app folder.

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

@Component({
    selector: 'my-app',
    templateUrl: '/Home/Index.cshtml',
})
export class AppComponent  {
    name = '';
}

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div id="Registeration">
    <my-app>Loading AppComponent content here ...</my-app>
    <input type="text" [(ngmodel)]="name"/>
    <p>{{name}}</p>
 
</div>

i am new in angular 4 . I have run angular cli command for just set up the angular 4 in visual studio solution. — shami sheikh, Dec 06 '17 at 13:41
Read it, It may help https://stackoverflow.com/questions/35762515/is-angular2-mvc — Mahi, Dec 06 '17 at 13:55
I just want to use app.component.ts file for index.cshtml . and i think the way i am passing the view into template url is not correct . I mean is it the right way to pass the mvc view in template url. like we can pass the html file in template url as follows './app.component.html' — shami sheikh, Dec 06 '17 at 13:57

score 0 · Answer 1 · answered Dec 06 '17 at 14:04

Possible solution

app.component.ts

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html', 
  styleUrls: ['./app.component.css']
})

app.component.html

<child-cmp></child-cmp> <------ selector of child component

child.component.ts

@Component({
  selector: 'child-cmp',         <----pass this selector to view this component
  templateUrl: './child.component.html', 
  styleUrls: ['./child.component.css']
})

name = 'child';

Put your index.cshtml file in child.component.html

child.component.html

<div id="Registeration">   
    <input type="text" [(ngmodel)]="name"/>
    <p>{{name}}</p>
</div>