0

I have multiple components along with their html pages and each page contains a title, type of page(subtitle), and id. Now instead of having this info added to every page i wanted to create a component which will contain this specific info and add it as a selector into all the components that way i could unify and control the structure on each page. I will also need to make some of the content route to another page upon click.

The way i am viewing it is that the DetailComponent which will contain the title, subtitle and id will be considered as a parent component i believe (?) and that from all the other pages i will be emitting the required info as child components. Correct me if i am wrong. Not sure if this structure i want is parent-child relationship or siblings.

So in a child component html page i would have: 

<detail-component [pagetitle] = "page.title" [pageId]="page.id"></detail-component>

in child component.ts: 

@Output()
public pageInfo: new EventEmitter<any>();

this.pageInfo.emit({...})

in the DetailComponent.html:

<div>
   <h1>{{page.title}}</h1>
   <h2>{{page.subTitle}} " - " {{page.Id}}</h2>
</div>

I am a little lost in connecting all this together to get what i want and any help will be appreciated.

Example of a page and i have five pages like this and each html page is being populated from it component: 

<div class="pageInfo">
<h2>{{Title}}Title of this page here</h2>
<h3>{{ID}}:{{Subtitle}} Subtitle of page here</h3>
</div>

I would like to move this html into the parent html page and then from each of the child components i would emit the info i need like the title, id and subtitle to the parent component and from within the child html page i would replace the title info html with

bluePearl
  • 1,237
  • 4
  • 24
  • 42

2 Answers2

0

Basically your logic is good, but you omitted (pageInfo)="..." so add to your child html selector. 

<detail-component [pagetitle]="page.title" [pageId]="page.id" (pageInfo)="handlePageInfo($event)"></detail-component>

However, if it will be multi-nested childs, then handling data can be a bit painful. You can always combine it with @Injectable service, but then making connections between components will be also painful. For @Input @Output solution would be that every child should also has property that if it has parent. Make a while loop untill it hasn't have parent.

Patryk Brejdak
  • 1,571
  • 14
  • 26
  • Would you happen to know of an example with `@Injectable` service? So i have 5 different components all on the same level all in which are displaying the page title, subtitle and id . So i want to pull out all the same displayed info into one component and with each page i will be passing the needed info into the parent component. – bluePearl Dec 20 '17 at 09:32
  • Well, if there is no multi-nested components, then `@Input @Output` is the best solution. – Patryk Brejdak Dec 20 '17 at 09:34
  • my issue is that i am not sure or clear how the setup for `@Input @output` with data works or setup properly. – bluePearl Dec 20 '17 at 09:37
  • About @Injectable service, take a [look here](https://stackoverflow.com/a/44414443/4700863) – Patryk Brejdak Dec 20 '17 at 09:37
  • Hmm, okay, can you expand a bit your question, what you gonna do with this data. So maybe I will come up with better/clearer solution. – Patryk Brejdak Dec 20 '17 at 09:38
  • Read this: https://angular.io/guide/component-interaction hope it helps. – Swoox Dec 20 '17 at 09:39
  • I have updated my post - let me know if you see any specifics missing. Thanks! – bluePearl Dec 20 '17 at 09:45
0

Well what you wan to create is a parent and child relation. This what you can do it will be a single page with multiple components in it:

Parent

------------

Childs

So how can you do this:

In parent HTML:

<detail-component *ngIf="child1" [pagetitle] = "page.title" [pageId]="page.id"></detail-component>
<detail-component2 *ngIf="child2" [pagetitle] = "page.title" [pageId]="page.id"></detail-component2>
<detail-component3 *ngIf="child3" [pagetitle] = "page.title" [pageId]="page.id"></detail-component3>

Something like this where you put child1 or 2 or 3 on true and put your data in it (can be different values and variables).

To send info back can use @Output like:

<detail-component *ngIf="child1" [pagetitle] = "page.title" [pageId]="page.id" (output)="setOutput($event)"></detail-component>

In in parent a fuction: private setOutput(_output){ //play with output here

Swoox
  • 3,707
  • 2
  • 21
  • 32
  • so having all the children in the parent html - does that mean that all 3 components are loaded or is it if i go to each of those components that it loads? I mean is it possible to have like one `` and have all 3 children switch in populating it based on what is currently viewed? – bluePearl Dec 21 '17 at 18:22