Angular 2 - Component Inheritance - base class variable not propagated to base template

Question

Is there something special to do when using Component Inheritance ?

edit : this concerns INHERITANCE, not parent/child view/components communication

as I try to hide a div defined in the base class template, it does not work

in the page, the variable is not even updated even if it gets modified in the code

1st, I tried with [hidden] and *ngIf

then I tried using changeDetectorRef but it does not do anything

it seems the value is not propagated to the template

base class:

@Component({
    selector: 'my-content',
    templateUrl: './content.component.html',
    styleUrls: ['./content.component.css'],
})    
export class ContentComponent implements OnInit {

    protected overlayVisible:boolean;

    constructor(....){...}

    ngOnInit() {
    }

    showOverlay()
    {
        this.overlayVisible=true; <<<<<<<<<<<<<< THESE GET CALLED
    }

    hideOverlay()
    {
        this.overlayVisible=false; <<<<<<<<<<<<<< THESE GET CALLED
    }
}

base template (content.component.html):

<div>
    <div class="contentMainDiv">
        <div class="contentBodyDiv"><ng-content select="[body]"></ng-content></div>
        <div [innerHTML]=" overlayVisible?'true':'false' "></div> /// DEBUG DIV
        <div [hidden]="!overlayVisible" class="contentOverlay" >
            <my-wait></my-wait>
        </div>

    </div>
</div>

child component :

export class CustomersComponent extends ContentComponent implements OnInit {

    private customers: any;

    constructor(
        private customersService: CustomersService,
        injector:Injector
        ) { super(injector); }

    getCustomers() {
        this.showOverlay();

        this.customersService.getCustomers().subscribe((customers: any) => {
            this.customers = customers;
            this.hideOverlay();
        });
    }

child template :

<my-content>
    <div body>
        <div *ngIf="customers">
            some table ...
        </div>
    </div>
</my-content>

what am I missing

is there something special to do when we use component inheritance ?

thanks

Phil · Accepted Answer · 2017-08-29 13:25:13Z

2

the (partial) answer is this :

the overriding class is having its own template instance so one have to link the base template to it

detail : https://github.com/angular/angular/issues/18920

so in the base class you add to the component anotations:

 exportAs: 'myContentComponent',

and the child class must have his template referencing it

 template: `<my-baseclass-component #myContentComponent>..
            <button (click)="myContentComponent.showOverlay()">toggle</button>

now I have no idea how to call that function from typescript child component to fit the question above

if anyone could answer, I'll update this answer

thanks

edited Aug 29, 2017 at 13:25

answered Aug 29, 2017 at 12:52

Phil

7561 gold badge12 silver badges22 bronze badges

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

Comments

Julius Dzidzevičius · Accepted Answer · 2017-08-23 13:45:19Z

1

You want to call a method that sits in parent component, right? Then EventEmitter can help you:

<child-component (showOverlay)="showOverlay()" (hideOverlay)="hideOverlay()"></child-component>

Child component:

import { EventEmitter, Output, OnDestroy } from '@angular/core';

 @Output showOverlay = new EventEmitter();
 @Output hideOverlay = new EventEmitter();


 getCustomers() {
    this.showOverlay.emit();
 <....rest of your code.....>

ngOnDestroy() {
   this.hideOverlay.emit();
}

I assume that you destroy child component and then want to hide overlay, so emitted hideOverlay in ngOnDestroy.

edited Aug 23, 2017 at 13:45

answered Aug 23, 2017 at 13:39

Julius Dzidzevičius

11k11 gold badges41 silver badges84 bronze badges

2 Comments

Phil Over a year ago

I made a plunker embed.plnkr.co/?show=preview&show=app%2Fapp.component.ts the base class function is called, but the template is not updated

Phil Over a year ago

admin , please gray out these answers, although they are correct, they do not match my question.thx

Dmitry Shutov · Accepted Answer · 2017-08-23 13:45:30Z

1

Variables in your base class cannot be affected by executing method in child class. When you execute this.showOverlay() it modified this.overlayVisible in the scope of child component. Use component interactions https://angular.io/guide/component-interaction#parent-listens-for-child-event

answered Aug 23, 2017 at 13:45

Dmitry Shutov

967 bronze badges

3 Comments

Phil Over a year ago

it's not different parent/child component, it's class inheritance

Phil Over a year ago

I made a plunker embed.plnkr.co/?show=preview&show=app%2Fapp.component.ts the base class function is called, but the template is not updated

Phil Over a year ago

admin , please gray out these answers, although they are correct, they do not match my question.thx

Phil · Accepted Answer · 2017-11-14 06:53:40Z

0

the way I made it work is by removing the exportas

<my-base-frame #baseFrame>
...
</my-base-frame>

in the code

@ViewChildren('baseFrame') baseFrames; // finaly found how to get base class instance

...

this.baseFrames.changes.subscribe( (_comps: QueryList <any>)
    {
        if(this.baseFrames.first && !this.baseFrame)
        {
            this.baseFrame=this.baseFrames.first;
            ...
        }
    })

answered Nov 14, 2017 at 6:53

Phil

7561 gold badge12 silver badges22 bronze badges

1 Comment

slasky Over a year ago

I know this post is old, but wanted to share a slightly easier way about this solution if you only have one baseFrame child: @ViewChild('baseFrame') baseFrame: BaseFrameComponentClass;

Collectives™ on Stack Overflow

Angular 2 - Component Inheritance - base class variable not propagated to base template

4 Answers 4

Comments

2 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related