Rendering multiple view using a single component in angular

Question

I am building an Angular 4 app integrated with MVC 5. I am creating a Movie component that has two templates. One to list the movies and second is to add the movies. How do I handle the render of either of the template using the Movie component. Currently the templateURL is containing only one template. The code is as below

app.component.ts

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

@Component({
    selector: "mrdb-app",
    templateUrl: "./Scripts/app/app.component.html"

})


export class AppComponent {

    pageTitle: string = "Movies Review Database";

}

app.component.html

<div>
    <h1>{{pageTitle}}</h1>
    <app-movie></app-movie>  //This selector belongs to movie component
</div>

movie.component.ts

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

@Component({
    selector: 'app-movie',
    templateUrl: './Scripts/movie/movie-list.component.html'

})
export class MovieComponent implements OnInit {

    pageTitle: string = "Movie List";

    constructor() { }

    ngOnInit() {
    }

}

Movie-list.component.html
//Assume I have written a logic to display list of movies

Movie-Add.component.html
//Assume I have written a html for data entry screen

Movie Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MovieComponent } from './movie.component';

@NgModule({
    imports: [
        CommonModule
    ],
    declarations: [MovieComponent],
    exports: [MovieComponent]
})
export class MovieModule { }

a Movie component that has two templates - a component cannot have two templates, however you can have multiple ng-template tags inside a component template and you can then access them using @ViewChildren and then render them using NgTemplateOutlet directive — Max Koretskyi
– Max Koretskyi, Commented Jun 12, 2017 at 6:26

Aashish · Accepted Answer · 2017-06-12 06:36:00Z

1

Hi there are two ways to achieve that. Either you can use routing or you can use custom tags. If you are using routing, then you need to create a app.routing.ts file and define all the path and component over there. Like this

app.routing.ts

import { Routes, RouterModule } from "@angular/router";
import { ModuleWithProviders }  from '@angular/core';

import { AddMovieComponent } from './addmovie/addmovie.component';
import { ListMovieComponent } from './listmovie/listmovie.component'; 

const APP_ROUTES: Routes = [

  { path: 'addmovie', component: AddMovieComponent },
  { path: 'listmovie', component: ListMovieComponent }

];

export const routing = RouterModule.forRoot(APP_ROUTES);

Another ways is in your app.component.html you can write these tags

<addmovie></addmovie>
<listmovie></listmovie>

Provided you properly import those components.

edited Jun 12, 2017 at 6:36

answered Jun 12, 2017 at 6:29

Aashish

8077 silver badges16 bronze badges

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

1 Comment

Aashish Over a year ago

@Tom Hope it helped!

augustine · Accepted Answer · 2017-06-12 06:35:44Z

0

using routing

movie.routing.ts

export const routes: Routes = [
  {
    path: '',
    component: MovieComponent
  }, {
    path: 'new',
    component: AddMovieComponent
  }, {
    path: 'edit/:id',
    component: EditMovieComponent
  }
];

try *ngIf

answered Jun 12, 2017 at 6:35

augustine

5384 silver badges15 bronze badges

Collectives™ on Stack Overflow

Rendering multiple view using a single component in angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related