CODEWITHSUNDEEP
angularangular-ui-router
Uzma
Uzma

Reputation: 17

Angular 4 - How to use same component as a child router of two different parent component?

My question is about routing in angular. I have a component TelephonicConversationComponent which is a child router of SearchProfileComponent. I want to use the component (TelephonicConversationComponent) again in JdTextSearchComponent.

Basically, I have two tabs (search-profile and jd-search). Under search-profile tab I have two more tabs (telephonic-conversation and schedule-meeting). Under jd-search I have two tabs, one of them is jd-text-search. I want to re-use telephonic-conversation under jd-text-search.

Here is my a part of code,

`{path:"search-profile", component:SearchProfileComponent,children:[
   {path: '', redirectTo:'telephonic-conversation',pathMatch:'full'},
   {path:"telephonic-conversation", component:TelephonicConversationComponent},
    {path:'schedule-meeting',  component:ScheduleMeetingComponent},
 ]},
 {path:"jd-search", component:JdSearchComponent,children:[
   {path: '', redirectTo:'jd-file-search',pathMatch:'full'},
   {path:"jd-file-search", component:JdFileSearchComponent},
   {path:'jd-text-search',  component:JdTextSearchComponent},
 ]},`

How can I re-use telephonic-conversation under jd-text-search?

Upvotes: 0

Views: 317

Answers (2)

DeborahK
DeborahK

Reputation: 60518

Just to ensure we are on the same page with the terms ... A child component is a nested component that is contained within the template of a parent component.

So to display the child component within the parent, in the HTML for the jd-text-search.component.html, you would just use the selector from the child component:

<telephonic-conversation></telephonic-conversation>

That puts the component directly within the other component. (No routing).

Is that what you are asking?

Upvotes: 0

Alann
Alann

Reputation: 657

If you try to use a component, you can declare a selector in the @Component annotation

in the html of the component you want to inject your other component you can use your selector

EXAMPLE : 

  @Component({
  selector: 'child-component',
  templateUrl: './child-component.component.html',
  styleUrls: ['./child-component.component.scss']
  })

in your parent.component.html you can do this

<child-component></child-component>

Upvotes: 1

Related Questions