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
Related
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.
Trying to query a ng-template with CdkPortalOutlet is always unsuccessful, and I cant understand why?
<ng-template CdkPortalOutlet></ng-template>
#ViewChild(CdkPortalOutlet) test: CdkPortalOutlet;
stackblitz
In order to use CdkPortalOutlet directive in AppComponent template you have import PortalModule in AppModule(i.e. NgModule where AppComponent has been declared)
import { PortalModule } from '#angular/cdk/portal';
...
#NgModule({
imports: [ BrowserModule, FormsModule, PortalModule, OverlayModule ],
^^^^^^^^^^^^
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Also the Angular HTML parser is case sensitive so that you need to use it like:
<ng-template cdkPortalOutlet></ng-template>
^^^
lower case
Forked Stackblitz
Since Angular 8 #ViewChild requires to give an extra static parameter and the documentation is hard to find on what value to set it to. If not set correctly it will result in an undefined value when trying to retrieve CdkPortalOutlet with #ViewChild.
TLDR
Set #ViewChild(CdkPortalOutlet, { static: true }) when migrating to Angular 8.
Extracted comment from Angular code
How do I choose which static flag value to use: true or false?
We have always recommended retrieving query results in ngAfterContentInit for content queries.
This is because by the time this lifecycle hook runs, change detection has completed for the relevant nodes and we can guarantee that we have collected all the possible query results.
Most applications will want to use {static: false} for this reason. This setting will ensure query matches that are dependent on binding resolution (e.g. results inside *ngIfs or *ngFors) will be found by the query.
If you need access to a TemplateRef in a query to create a view dynamically, you won't be able to do so in ngAfterContentInit.
Change detection has already run on that view, so creating a new view with the template will cause an ExpressionHasChangedAfterChecked error to be thrown.
In this case, you will want to set the static flag to true and create your view in ngOnInit.
In most other cases, the best practice is to use {static: false}.
However, to facilitate the migration to version 8, you may also want to set the static flag to true if your component code already depends on the query results being available some time before ngAfterContentInit.
For example, if your component relies on the query results being populated in the ngOnInit hook or in #Input setters, you will need to either set the flag to true or re-work your component to adjust to later timing.
Note: Selecting the static option means that query results nested in *ngIf or *ngFor will not be found by the query.
These results are only retrievable after change detection runs.
Finding angular 2 syntax is pain - everything is outdated. With that said, what is the proper way to attach variables (simple or objects) to "$scope"? (I realize the idea of controller $scope doesn't exist anymore...or controllers for that matter):
import {Component} from '#angular/core'
#Component({
selector: 'testtag',
templateUrl: './simplecomponent.component.html',
})
export class SimpleComponent {
public myNumber : number = 5;
}
html:
<div>Hi from component template! {{myNumber}}</div>
This code works. I can see "5" in my template output. HOWEVER, everything I have read seems to to say that I need to do something like this.muNumber = 5;. Is that for when plain javascript is used? Is this even relevant when using typescript? If so, how?
tl;dr: What's the proper way to do one way and two-way binding in Angular 2 as of right now? (Now that "final" Angular 2 is out).
Looking at the question, It seems that you want to know how you get 5 as output without using this?
It is printing 5 because you are directly assigning the initial value to property myNumber of class SimpleComponent. Since that is initialized with 5 it prints 5 when rendered.
If you want to fit this in your example this is how your component will look like
export class SimpleComponent {
public myNumber : number;
constructor() {
this.myNumber = 5;
}
}
In short whenever you are trying to access the class property inside constructor or any function inside component you have to use this
I am trying to find a way to dynamically construct a template in Angular2. I was thinking templateRef might provide a way to do this. But I could be wrong.
I found an example of templateRef being used here.
I was looking at templateRef in this example. I noticed the syntax is [ng-for-template] I also tried [ngForTemplate] cause I know this has changed recently.
So at the moment I have this:
import {Component, TemplateRef} from 'angular2/core';
#Component({
selector : 'body',
template : `
<template [ngForTemplate]="container">
<div class="container"></div>
</template>
`
})
export class App
{
#ContentChild(TemplateRef) container;
constructor() {}
ngAfterContentInit()
{
console.log(this);
}
}
This example throws an error:
Can't bind to 'ngForTemplate' since it isn't a known native property
So firstly I am wondering. What is the right way to do this? The docs don't provide any examples.
Secondly, is there a good way I can add new template logic to my template or dynamically construct a template? The structure of the application can be a very large amount of different structural combinations. So if possible I would like to see if there is a way I can do this without having a huge template with a bunch of different ngIf and ngSwitch statements..
My question is really the first part about templateRef. But any help or suggestions on the second part is appreciated.
Creating your own template directive it's not difficult, you have to understand two main things
TemplateRef contains what's inside your <template> tag
ViewContainerRef as commented by Gunter, holds the template's view and will let you to embed what's inside the template into the view itself.
I will use an example I have when I tried to solve this issue, my approach is not the best for that, but it will work for explaining how it works.
I want to clarify too that you can use any attribute for your templates, even if they're already used by builtin directives (obviously this is not a good idea, but you can do it).
Consider my approach for ngIfIn (my poor approach)
<template [ngIfValue]="'make'" [ngIfIn]="obj">
This will print
</template>
<template [ngIfValue]="'notExistingValue'" [ngIfIn]="obj">
This won't print
</template>
We have here two templates using two inputs each ngIfIn and ngIfValue, so I need my directive to grab the template by these two inputs and get their values too, so it would look like this
#Directive({
selector : '[ngIfIn][ngIfValue]',
inputs : ['ngIfIn', 'ngIfValue']
})
First I need to inject the two classes I mentioned above
constructor(private _vr: ViewContainerRef, private _tr: TemplateRef) {}
I also need to cache the values I'm passing through the inputs
_value: any;
_obj: any;
// Value passed through <template [ngIfValue]="'...'">
set ngIfValue(value: any) {
this._value = value;
}
// Value passed through <template [ngIfIn]="...">
set ngIfIn(obj: any) {
this._obj = obj;
}
In my case I depend on these two values, I could have my logic in ngOnInit but that would run once and wouldn't listen for changes in any of the inputs, so I put the logic in ngOnChanges. Remember that ngOnChanges is called right after the data-bound properties have been checked and before view and content children are checked if at least one of them has changed (copy and paste from the docs).
Now I basically copy & paste NgIf logic (not so complex, but similar)
// ngOnChanges so this gets re-evaluated when one of the inputs change its value
ngOnChanges(changes) {
if(this._value in this._obj) {
// If the condition is true, we embed our template content (TemplateRef) into the view
this._vr.createEmbeddedView(this._tr);
} else {
// If the condition is false we remove the content of the view
this._vr.clear();
}
}
As you see it's not that complicated : Grab a TemplateRef, grab a ViewContainerRef, do some logic and embed the TemplateRef in the view using ViewContainerRef.
Hopefully I made myself clear and I made how to use them clear enough also. Here's a plnkr with the example I explained.
ngForTemplate is only supported with ngFor
<template [ngFor] [ngForOf]="..." [ngForTemplate]="container"
or
<div *ngFor="..." [ngForTemplate]="container"
not on a plain template. It is an #Input() on the NgFor directive
Another way to use TemplateRef
If you have a reference to ViewContainerRef you can use it to "stamp" the template
constructor(private _viewContainer: ViewContainerRef) { }
ngOnInit() {
this.childView = this._viewContainer.createEmbeddedView(this.templ);
this.childView.setLocal('data', this.data);
}
I know it should be easy but angular 2.0 has no many examples yet..
In one of my components in some case I need to add class on my body tag. But my application is bootstrapped deeper than body, so I need something like
angular.element('body').addClass('fixed');
but in Angular 2.0..
BTW, I know I can somehow bootstrap my application to include body tag, but I think in some other cases I would need to select some elements anyway, so I need a solution how to do this simple task - "select element and add class to it"
Update
I'm not sure if DOM is actually still supported in RC. The related statements aren't very clear. Something like
DOM is only for internal use. Either access the DOM directly or use a custom renderer.
I haven't see how a custom renderer might be implemented or how to provide an implementation depending on the current platform (webworker, server, DOM thread).
Update
This seems to be the Angular2 way
import { DOM } from 'angular2/src/platform/dom/dom_adapter';
DOM.addClass(DOM.query("body"), 'fixed');
Import from .../src/... at your own risk. .../src/... is considered private implementation and you can't expect any guarantees that the API won't change without notice.
I tried it in Dart and it works fine (not sure if the TS import above is correct though). In Dart DOM is exported by package:angular2/angular2.dart
Original
If you want to access a DOM element that's outside of your Angular application root, just use document.querySelector(), no need to involve Angular.
As of Angular2 Version 2.0.0-beta.17.
Attribute Directives in Angular2 will do this for you nicely.
Please see this plunk written in TypeScript. This does what you want nicely.
The directive file my-highlight.ts has the line:
this.renderer.setElementClass(this.element, "red", true);
This sets the CSS class on the element.
While template.html has the actual element which is decorated with the directive [myHighlight]:
<p [myHighlight]>Mouseover to highlight me!</p>
This, to me, provides the least hack-ish answer to the question without any dependency on jqLite.
As of angular 2.4 you should inject the DOCUMENT and don't interact with any adapter:
import { Component, Inject } from '#angular/core';
import { DOCUMENT } from '#angular/platform-browser';
#Component({})
export class MyClass {
constructor (#Inject(DOCUMENT) private document) { }
doSomething() {
this.document.someMethodOfDocument();
}
}
Further reading: https://github.com/angular/angular/issues/8509
DOM Manipulation in Angular 2 / 4 app
To manipulate the DOM in Angular 2/4 apps, we need to implement the method ngAfterViewInit() of AfterViewInit. The method ngAfterViewInit() is called when the bindings of the children directives have been checked for the first time. In other words, when the view is initially rendered.
The #ViewChild provides access to nativeElement. It is recommended to not access nativeElement inside the ngAfterViewInit() because it is not browser safe. Also, it's not supported by web workers. Web workers will never know when the DOM updates.
The right way is to use renderer. The renderer needs to be injected to the component constructor. We need to provide an id reference to the HTML element on the view something like this:
<p #p1></p>
It shall be accessed by the corresponding coponent .ts file, something like this:
export class SampleComponent implements AfterViewInit {
#ViewChild("p1") p1;
constructor(private renderer: Renderer2) //Renderer set to be depreciated soon
{ }
ngAfterViewInit() {
//recommended DOM manipulation approach
this.renderer.setStyle(this.p1.nativeElement, //setElementStyle for soon to be depreciate Renderer
'color',
'red');
//not recommended DOM manipulation approach
//this.p1.nativeElement.style = "color:blue;";
}
}
I don't recommend direct DOM access from Angular, but you have a DOM hook via the ElementRef of your component. Once you have access to it you can use it directly or via jquery or any other DOM manipulation technique. I have included an example of how to use jquery to run general queries. If you are always going for the body tag you don't really need ElementRef, but it's useful for something that is relative to the root of the component.
import {Component, ElementRef, OnInit} from '#angular/core';
declare var jQuery:any;
#Component({
selector: 'jquery-integration',
templateUrl: './components/jquery-integration/jquery-integration.html'
})
export class JqueryIntegration implements OnInit {
elementRef: ElementRef;
constructor(private elementRef: ElementRef) {
}
ngOnInit() {
jQuery(this.elementRef.nativeElement).find('.moving-box').draggable({containment:'#draggable-parent'});
}
}
More info here: http://www.syntaxsuccess.com/viewarticle/using-jquery-with-angular-2.0
Demo: http://www.syntaxsuccess.com/angular-2-samples/#/demo/jquery