Component child selector with extended template

Question

I want to create component with view hierarchy outside of Router and RouterModule

Example:

comp-parent.ts

@Component({
  selector: 'comp-parent',
  template: `
        <p>parent works</p>
        <router-outlet></router-outlet>
        `,
  styleUrls: ['./comp-parent.css']
  })
export class ComponentParent { 
    protected foo: string;
}

comp-children.ts

@Component({
  selector: 'comp-children',
  template: "<p>Children works</p>",
  styleUrls: ['./comp-children.css']
  })
export class ComponentChildren extends ComponentParent { }

component-foo-bar.ts

@Component({
  selector: 'component-foo-bar',
  template: "<comp-children></comp-children>",
  styleUrls: ['./component-bar.css']
  })
export class ComponentFooBar { }

In ComponentBar I would expect that comp-children will be comp-parent with comp-children included, but only comp-children template is loaded.

How to load parent template with <router-outlet/> resolved to comp-children template?

In your component-foo-bar.ts file, you used a templateUrl but gave the html directly. Is it a mistake in posting the code? — dileepkumar jami, Feb 14 '19 at 14:18
What do you mean by "outside of Router and RouterModule" and using `router-outlet`? — Bardr, Feb 14 '19 at 14:33

Baruch Gans · Answer 1 · 2019-02-14T14:26:51.827

0

Just replace the

@Component({
  selector: 'component-foo-bar',
  template: "<comp-children>",
  styleUrls: ['./component-bar.css']
  })
export class ComponentFooBar { }

with

@Component({
  selector: 'component-foo-bar',
  template: "<comp-children></comp-children>",
  styleUrls: ['./component-bar.css']
  })
export class ComponentFooBar { }

edited Feb 14 '19 at 14:26

answered Feb 14 '19 at 14:20

Baruch Gans

1,415
1
10
21

dileepkumar jami · Answer 2 · 2019-02-14T14:28:29.977

0

When you inherit a class, only you can use the logic of the base class but not the template of it.

Infact, you have not used the child component inside the parent component. ( I meant using child component selector in parent component template)

So they are not parent and child actually and they are just base and derived classes

edited Feb 14 '19 at 14:28

answered Feb 14 '19 at 14:23

dileepkumar jami

2,185
12
15

It would be better if you post your entire code on stack blitz – dileepkumar jami Feb 14 '19 at 14:23
Router and state routing works like i described, (if you define proper RoutingModule), but i want to use it outside of URL routing. – Mike Quoro Feb 14 '19 at 14:40

score 0 · Answer 3 · answered Feb 14 '19 at 14:47

0

If you want to make such hierarchy you don't need to use router-outlet nor inheritance. Just use components directly (by selectors). See StackBlitz demo.

answered Feb 14 '19 at 14:47

Bardr

2,319
2
12
21

It's part of bigger mechanism, I can't use children in parent component like provided in your example because its not extending base template. It simply uses `children-component` inside `parent-component`. – Mike Quoro Feb 14 '19 at 15:15

Component child selector with extended template

3 Answers3