I have an application that use #ViewChild and below is the code I have
#ViewChild('paginator', { read: MatPaginator, static: true}) public paginator: MatPaginator;
on the front I am using
<mat-paginator [ngStyle]="{'display': orders.length > 0 ? 'flex': 'none' }" #paginator>
and I have implemented AfterViewInit and this is the code I have just to check that the paginator has been initialised:
ngAfterViewInit(): void {
console.log('tab group', this.paginator);
}
but the this.tabGroup is undefined and hence I can't set it's property. What am I doing wrong.
Thanks
Since Angular 8 ViewChild and ContentChild decorators must have a new option called static.
If you add static: true on a dynamic element (wrapped in a condition or a loop), then it will not be accessible in ngOnInit nor in ngAfterViewInit.
Setting it to static: false should behave as you're expecting it to.
Also, when updating to Angular 8, in the command line there will be a message explaining the new ViewChild and ContentChild changes, and a link this documentation page, and here's the pull request of the changes, with some explanations. This might help wrapping your head around the changes.
I am trying to access the childView instance but it keeps saying the the childView is undefined.
Here is my code for childViews:
#ViewChild(CreateQuestionnaireComponent,{ read: true, static: false }) private childQuestionnaireDialog:CreateQuestionnaireComponent;
#ViewChild(ProjectNavbarComponent,{ read: true, static: false }) private childProjectNavBar:ProjectNavbarComponent;
#ViewChild(QuestionnaireNodeComponent,{ read: true, static: false }) private childQuestionnaireNode:QuestionnaireNodeComponent;
....
onCreateTerminal() {
this.childQuestionnaireDialog.generateQuestionnaireDropDownList();
this.childQuestionnaireDialog.resetFields();
this._hideQuestionnaireDialog = false;
this._modalTitle = 'New Terminal';
this._placeHolderText = 'Terminal Questionnaire Title';
this._terminal = true;
}
...
It says :this.childQuestionnaireDialog is undefined".
It was working with Angular 7.
As per my new knowledge, the #viewChild takes a flag called static. If we put the flag to true, the parent component tries to get a reference to the childView during its own creation. In other words, we could have an instance of the childView in the onInit() method of the parent Component.Basically a one time access because we won't be able to access in any other methods.
The flag set to false, is basically the new way in ivy renderer.
The problem in my case, neither options are working.
I had a similar problem where ViewChild component is undefined in onInit() method.
This fixed the issue:
// Ensure Change Detection runs before accessing the instance
#ContentChild('foo', { static: false }) foo!: ElementRef;
// If you need to access it in ngOnInit hook
#ViewChild(TemplateRef, { static: true }) foo!: TemplateRef;
You must be trying to access the results of a ViewChild query before the view has completed initializing.
So, you can either mark the query static:
#ViewChild('test', {static: true}) test: ElementRef;
... or move the logic to ngAfterViewInit (preferred).
Refer https://angular.io/guide/static-query-migration
In my case i had rendered my child on *ngIf condition. Hence ViewChild was unable to initialize the required element. Have updated the logic to render the component outside *ngIf, there by ViewChild was able to successfully initialize the element.
Hence if possible, when ViewChild is required, alter the logic to render the component outside *ngIf and show appropriate messages. Or Hide the visibility of the elements using CSS, instead of *ngIf.
I spent an hour not finding it on SO, so it may also help someone else:
My mistake was that I used the wrong selector in the angular html.
The component I wanted to reference looks like this:
#Component({
selector: 'app-universal-modal',
templateUrl: './universal-modal.component.html',
styleUrls: ['./universal-modal.component.scss']
})
export class UniversalModalComponent implements OnInit {
Now I used viewchild in its parent:
#ViewChild('universalModalComponent', {static: true}) universalModalComponent: UniversalModalComponent;
And the html selector should be app-universal-modal:
<app-universal-modal #universalModalComponent ></app-universal-modal>
But instead I used new-task selector.
Strange thing there was no compile time error, but a runtime one...
If you are using #viewchildTemplateRef element inside *ngIf condition in .HTML file then #ViewChild selector/reference variable in .ts file will be undefined. So, use [ngClass] instead.
Example: Use [ngClass]={'hide': data.length = 0} instead of *ngIf=data.length>0
According to the docs, the metadata property read is:
`read - read a different token from the queried elements.`
In other words, it's used if you want to read in ViewContainerRef or the Component name instead of the normal ElementRef (which is the default if you leave read out). So putting true as the value is saying to return type true from the element, which as far as I know is impossible.
A much better explanation is here, but the short answer to your problem is take out the read property or to specify ElementRef or the specific type you want.
Slightly different issue on my side, so adding for posterity.
I was initially implementing a #ViewChild and within the scope of the component everything was alright as normal.
However I was implementing a event subscription to triger a method on the child using this.action()withing the event, which lost its reference via the event. (Bad eventing on my side)
Strange one for me, but one solution (not the best fix but before the event manager refactor) was to pass through the reference to this at subscription creation time.
var self = this; // var because we want it to stick around.
subscription.event.subscribe(()=>{
self.callOnThisRef();
})
I'm sure this is by design as it highlighted the problems with my event management. But it was strange to debug.
For Angular 7 we won't get the {static: boolean} parameter instead we are getting {read: any} in my case I had a *ngif directive so the reference of the element was not getting by Viewchild(), what I did is I just checked the element is undefined or not in Component.ts
If you need to access it in ngOnInit hook
Here is an example for removing class by Hot listening
#ViewChild('elref', ) elref: ElementRef;
import { Component, ElementRef, , Renderer2, ViewChild } from'#angular/core';
export class Component implements OnInit {
#ViewChild('elref', ) elref: ElementRef;
constructor(private renderer: Renderer2) {}
ngOnInit() { this.hotlistening(); }
hotlistening() {
this.renderer.listen('window', 'click', (e: Event) => {
if (this.elref !== undefined) { //Here i checked for undefined
this.elref.nativeElement.classList.remove('open');
});
}
}
#ViewChild('test', {static: false}) test: ElementRef;
(I know this question is a bit old. but for those who the guys still find the hint like me)
I had faced this problem also and I found that
{static: true} option might not work properly always when your element is in the parent that has *ngIf.
The workaround to me is that making that element to sub-component
and using it on its own ngOnInit or ngAfterViewInit.
In this way, I don't have to check whether it really exists, subscribe changes, or something complicated extra work.
maybe you could consider it too.
I think this is the simplest solution if it's possible.
I had the error, but what was causing was more hidden. Simply My View Child component had an error on template, where a variable was undefined. I only perceived it because I revised the HTML. It was hard to notice the error, once no error message was triggered.
for child to be available in ngOnInit()
#ViewChild(CreateQuestionnaireComponent,{ read: true, static: false }) private childQuestionnaireDialog:CreateQuestionnaireComponent;
for child to be available in ngAfterViewInit()
#ViewChild(CreateQuestionnaireComponent,{ read: true, static: false }) private childQuestionnaireDialog:CreateQuestionnaireComponent;
but please make sure your selector of child component <app-questionnaire> </app-questionnaire> in html of parent should not embedded in any condition otherwise it will not follow the above pattern, it will required the condition to be true first then.
I am setting up a new project with latest Angular.I am using Angular Material for this.I am using BreakpointObserver from #angular/cdk/layout.
I am able to add that succesfully to one of my component.But I want to add it globally to my project so that all the components/modules can use web/tablet/mobile breakpoints for different DOM manipulation.
I am able to add that to the app.component.ts , but I am expecting to write a directive or something.Not service because BreakpointObserver is already a service.
What would be the best approach to add BreakPointObserver observables globally in the project.Do not want to add isHandset$ observables everytime in each component's ts file
I think your idea of using some kind of custom directive would be a good solution. For example, in the case you want to add/remove components of the DOM, you could define only one structural directive that handle adding/removing its host, depending on the viewport dimension using the BreakpointObserver service.
To accomplish that you could define something like this:
#Directive({
selector: '[contentForSmallScreen]'
})
export class ContentForSmallScreenDirective implements OnDestroy {
constructor(
private templateReference: TemplateRef<any>,
private viewContainerRef: ViewContainerRef,
private breakpointObserver: BreakpointObserver
) {
this.breakpointObserver
.observe([tablet,mobile])
.pipe(pluck('matches'), distinctUntilChanged())
.subscribe(this.showHideHost);
}
private showHideHost = (matches: boolean) => {
matches
? this.viewContainerRef.createEmbeddedView(this.templateReference)
: this.viewContainerRef.clear();
}
ngOnDestroy(): void {
this.breakpointObserver.ngOnDestroy();
}
}
And then after declare it at your NgModule, it can be used with any component/html element you wanna add/remove from the DOM depending on if the viewport's dimension meet the tablet and mobile viewport specs.
<app-any-component *contentForSmallScreen></app-any-component>
👨💻 StackBlitz example
I'm working on writing a component intended to simplify/homogenize the way our forms look and interact. The code looks something like this:
Example Usage
...
<my-form-input labelKey = "email" controlName="emailAddress" [form]="userForm">
<input myInput class="form-control" type="email" formControlName="emailAddress" />
</my-form-input>
...
You can see that "emailAddress" is passed to MyFormInputComponent as the controlName and is passed a second time to the FormControlName directive on the <input> element. I'd like to only pass this once so that my end user doesn't have to do this.
Is there a good way I can go about this, or is this just a constraint I should accept (if yes, an explanation of why this constraint exists would be welcome)? Code is shown below.
I've tried two approaches:
Setting a #HostBinding("attr.formControlName") annotation in the MyInput component. I can manipulate an attribute called formcontrolname on the element this way, but it doesn't trigger the directive that Angular Forms needs to properly register the control with the group.
Ask the user to supply formControlName to the <input> element and read the value off of this for the rest of the component. This might work, but I'd have to access the DOM directly through an ElementRef, which is not recommended. The recommended route for interacting with DOM -- Renderer -- doesn't seem to expose any ability to read attributes either.
my-form-input.component.ts
#Component({
selector: 'my-form-input',
templateUrl: './my-form-input.component.html',
styleUrls: ['./my-form-input.component.scss']
})
export class MyFormInputComponent implements OnInit, AfterContentInit {
#Input()
labelKey: string;
#Input()
controlName: string;
#Input()
form: FormGroup;
#ContentChild(MyInputDirective)
input: MyInputDirective;
ngAfterContentInit(): void {
this.initInput();
}
/**
* Updates the input we project into the template
*/
private initInput() {
this.input.updatePlaceholder(this.labelKey);
// I'd like to somehow edit the FormControlName directive applied to the input here
}
}
my-form-input.component.html
<label>{{ labelKey | translate }}</label>
<ng-content></ng-content>
<my-input-error [control]="form.controls[controlName]" [name]="labelKey | translate" />
my-input.directive.ts
#Directive({
selector: '[myInput]'
})
export class myInputDirective implements OnInit {
private placeholderKey = "";
#HostBinding("placeholder")
private placeholder: string;
updatePlaceholder(placeholderKey: string) {
this.placeholderKey = placeholderKey;
this.placeholder = this.translateService.instant(this.placeholderKey);
}
constructor(private translateService: TranslateService) {
}
}
my-form-error.component.ts
// Not shown since not relevant.
I'm still not sure the exact explanation, but some reasoning alludes to where I might have strayed.
I assumed that my component owned the elements that it was projecting, but I actually think this isn't true. Your opportunity to set attributes/directives is in the template. This means you are better off including any elements that you want to own/control into the template rather then just projecting them.
In this case, that leads you to making separate components for specific form controls (like <input>, <textarea>, etc). This is what I've ended up doing. This is better from a design endpoint anyway -- one component to wrap all possible form-controls was never going to happen. Either project a form control that duplicates some properties, like I do in the question, or create specific components. Or both (just make your most common form controls into components, wrap the one-off problems in your projecting component).
Here are some blogs that helped me find my way:
https://medium.com/#vadimkorr/implementing-nested-custom-controls-in-angular-5-c115c68e6b88
https://blog.angularindepth.com/never-again-be-confused-when-implementing-controlvalueaccessor-in-angular-forms-93b9eee9ee83
I've been trying to access my custom directive I applied on an element by using #ViewChild(CustomDirective) or #ContentChild(CustomDirective), respectively using the set variable for the first time in my ngAfterViewInit or ngAfterContentInit function.
However, neither of them worked.
At first, I thought that it was due to me loading some content from a webserver, but even after having set static variables, it doesn't work.
Here's what I have:
#Directive({
selector: '[det-insert]',
})
export class DetailedDirective {
constructor(public viewContainerRef: ViewContainerRef) { }
}
And
... (importing + component stuff)
export class DetailedView implements AfterViewInit {
#ViewChild(DetailedDirective) detView : DetailedDirective;
constructor(...)
ngAfterViewInit(){
alert(detView);
}
}
And the template:
<ng-template det-insert></ng-template>
However, the alert returns undefined.
And I have no clue as to why. Any ideas? I already looked through stackoverflow, but neither is my template obstructed by *ngIf, nor do I start using my queried directive before the proper "AfterXInit" function. I already tried switching ViewChild and AfterViewInit for ViewContent and AfterContentInit respectively, to no avail.
I ran into a similar issue myself. I created a separate module for various alert directives/components. My alert directive was defined and declared in that alert module. I was trying to use the directive in my app module, and in order to get this same example to work, you need to specify that the alert module exports: [AppLevelAlertDirective].
You can still use <ng-template yourDirective></ng-template>, despite it not showing up in the DOM later. This is captured well before the DOM is rendered. Please see https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html#!#loading-components
Add DetailedDirective to declarations: [] of your module
<ng-template> isn't added to the DOM, and therefore DetailedDirective can't be found. If you use <div det-insert> it will work