Angular 4 - get ViewRef of current component

Question

How can i get the ViewRef of my current component -

I am trying to get ViewRef from a service. Here is the code -

component.service.ts

import { Injectable, ViewRef } from '@angular/core';

@Injectable()
export class CheckboxService{

constructor(private viewRef: ViewRef){
}

getViewRef(){
    return this.viewRef;
}
}

component.ts

import { Component, EventEmitter, Output, ViewChild, ViewRef } from 
'@angular/core';
import { AddFormDirective } from '../../add-form/add-form.directives';
import { CheckboxService } from './checkbox.service';

@Component({
selector: 'ang-checkbox',
templateUrl: './checkbox.component.html'
})

export class CheckboxViewComponent {

@ViewChild(AddFormDirective) addFormDirective: AddFormDirective;

constructor(private checkboxService: CheckboxService){
}

remove_element(){
    let viewContainerRef = this.addFormDirective.viewContainerRef;
    let currentComponentIndex = 
    viewContainerRef.indexOf(this.checkboxService.getViewRef());
    viewContainerRef.remove(currentComponentIndex);
}
}

I get following error -

No provider for ViewRef!

What is the best way to get ViewRef of current component?

The best way is to get it after creation some component dynamically — yurzui
– yurzui, Commented Sep 23, 2017 at 16:06
What do you want to do with ViewRef? Seems you want to remove the component from inside it. I don't think it's a good idea to try to remove a component imperatively that was added by Angular. — Günter Zöchbauer
– Günter Zöchbauer, Commented Sep 23, 2017 at 16:07
Please provide minimal working example of how you are creating your components — yurzui
– yurzui, Commented Sep 23, 2017 at 16:10

Paul Draper · Accepted Answer · 2020-12-05 03:23:06Z

5

Inject the ChangeDetectorRef.

export class ExampleComponent {
   constructor(@Inject(ChangeDetectorRef) view: ViewRef) {
   }
}

answered Dec 5, 2020 at 3:23

Paul Draper

84.2k53 gold badges216 silver badges303 bronze badges

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

Comments

H.jame · Accepted Answer · 2020-03-22 13:38:40Z

0

resolve Component to componentFactory with ComponentFactoryResolver;
get ComponentRef from the method of ViewContainerRef which call createComponent;
access ComponentRef['hostView'].

answered Mar 22, 2020 at 13:38

H.jame

751 silver badge6 bronze badges

Collectives™ on Stack Overflow

Angular 4 - get ViewRef of current component

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related