Develop Reference

Not able to dynamically attach component to ag-grid which is read as viewContainerRef

I am trying to attach one component dynamically as sibling to the ag-grid-angular. I have written an attribute directive which sits on top of the ag-grid and in the directive viewContainerRef is injected as below.
<ag-grid-angular tableDirective style="width: 100%;height:100%" class="ag-theme-balham" [rowData]="rowData" [suppressDragLeaveHidesColumns]="true" [getContextMenuItems]="getContextMenuItems" [enableRangeSelection]="true" [rowClassRules]="rowClassRules"
[columnDefs]="columnDefs" [suppressMakeColumnVisibleAfterUnGroup]="true" [rowGroupPanelShow]="rowGroupPanelShow" (gridReady)="onGridReady($event)" [defaultColDef]="defaultColDef" [components]="components" [frameworkComponents]="frameworkComponents"
[context]="context">
</ag-grid-angular>
Inside of the directive I have a constructor like this.
#Directive({
selector: 'tableDirective'
})
class TableDirective(){
constructor(private viewContainerRef: ViewContainerRef){}
attachComponent(component: any, options) {
const toolTipComponentFactory = this.componentFactoryResolver
.resolveComponentFactory(component);
this.viewContainerRef.createComponent(toolTipComponentFactory );
}
}
I have a function to attach a component on some event of my choice. But I am not able to dynamically attach and If in case the component it is getting attached, Its attaching at some random place. Could someone help? Thanks in advance.

(Angular) How can I get the #tag definition in html to Javascript?

I am having difficulty working on an Angular project.
In HTML...
<input #abc>...</input>
In Javascript
let var = ... *(how can i get the input element 'abc' to javascript?)*
I know it's too basic,
I am having a lot of trouble. Help!

this a template reference, you need to grab this element using #ViewChild decorator
#Component({
template:" <input #abc>...</input> "
})
export class SomeComponent implements AfterViewInin{
#ViewChild("abc")
element:ElementRef<HtmlElement>;
ngAfterViewInit(){
console.log(this.element.nativeElement);
}
}
I encourage you to read, the following topics to get the knowledge for that
https://angular.io/guide/component-interaction#parent-calls-an-viewchild for viewChild
https://angular.io/guide/template-syntax#template-syntax for template reference

you can refererence it with a
#VhiewChild('abc') myInput: ElementRef;.
however if you want JUST value more valid and easy way to make a field on you class, lets say value
and update it when your input updates <input (input)="value = $event.target.value" [value]="value">

if you use event
<input #abc (click)="getabc(abc)">...</input>
getabc(element) { console.log(abc) } //element input
if just get in .ts
#ViewChild("abc") element:ElementRef<HtmlElement>;
you can get element .

ngIf and click not working for dynamic html in angular2

ngIf and click not working for dynamic html.
when load html using innerHtml then ngIf and click event not loading.
export class FillInBlanksComponent implements OnDestroy, OnInit {
question = '';
editable = true;
ngOnInit() {
question = '<span *ngIf="editable" name="answers['+incr+']" contenteditable="true" (click)="onclick()"> </span>';
}
onClick(){
alert("clicked!!!!");
}
}

The function you're calling is (click)="onclick()" but you've defined onClick().
Another thing is, you might want to DOM Sanitize the string else you'll get a warning. Please check this answer out on how to do that.

check you have done spelling mistake use (click)="onClick()"
you are using small c in your function call

during the initial page load need to change the add/edit color

I am learning angular2.
during the initial page loads, I need to change the add/edit preference colour.
can you tell me how to fix it?
I googled for the load event.
but I am not able to find out anything.
providing my code below.
https://stackblitz.com/edit/angular-zddcxy?file=app/app.component.html
<!-- language-all: lang-or-tag-here -->
public loadColor() {
console.log('this.changeColor--->');
}
<span id="open1" (click)="loadColor()">add/edit prefrence</span>

Use ngOnInit and ViewChild decorator
#ViewChild('open1') el:ElementRef;
ngOnInit(): void {
const span = this.el.nativeElement;
span.style.color = 'red';
}
And in HTML add #open1 as ref
<span #open1 id="open1" (click)="loadColor()">add/edit prefrence</span>
see https://stackblitz.com/edit/angular-uvmusm?file=app/app.component.html

For catch initial page loads event, you need to use Angular component lifecycle hook. So you need it add ngOnInit is called by Angular completed creating the component.
For add ngOnInit you need import OnInit
import {Component, OnInit} from '#angular/core';
You need to add ngOnInit hook method
//implement OnInit's `ngOnInit` method
ngOnInit(){
console.log('this.changeColor--->');
}
For more information https://angular.io/guide/lifecycle-hooks
I have updated your code https://stackblitz.com/edit/angular-gzqebz?file=app/app.component.ts

Angular2 component - render html from the index page

Is it possible to render html which is inside app-nav tag already, rather then providing it in templateUrl?
#Component({
selector: 'app-nav',
// commented out - templateUrl: './nav.component.html',
styleUrls: ['./nav.component.scss']
})
export class NavComponent {
title: string = 'This is my title';
}
Html that is already on the html page.
<app-nav>
nav works! {{ title }}
</app-nav>
If I uncomment the templateUrl then app-nav will be replaced by nav-component.html page, but I dont want that. I have dynamic html and I want to render that.

You can use embedded view with ngTemplateOutlet projection. Wrap your content within <app-nav> tags in <template>. Than in your NavComponent find this TemplateRef with ContentChild and insert this templateRef into component's template passing context that contains your title variable to it. Something like this:
#Component({
selector: 'app-nav',
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.scss']
})
export class NavComponent {
title: string = 'This is my title';
#ContentChild('defaultTemplate') defaultTemplate = null // get templateRef
}
In nav.component.html create template outlet with relative template context
<template [ngOutletContext]="{ title: title }" [ngTemplateOutlet]="defaultTemplate"></template>
....other component content....
And then in place of component use:
<app-nav>
<template #defaultTemplate let-title="title">
nav works! {{ title }}
</template>
</app-nav>
UPD:
Here is a plunk with example
in app/some.component.ts there is a ngTemplateOutlet projection from app/app.component.ts template
UPD:
Ok, there is a way to get initial content from index.html into the component. You can use APP_INITIALIZER function that will be executed when an application is initialized.
Here is the plunk
See app/root-template.initializer.ts
In app/app.component.ts I just replace relevant property with initial content. This is a bit hacky way and should be done by replacing template in ComponentMetadata which is obtained with Reflect.getMetadata:
const annotations = Reflect.getMetadata('annotations', NavComponent)
const meta = annotations.find(annotation => annotation instanceof ComponentMetadata)
meta.template = meta.template.replace(
'{{ someVarInTemplate }}',
'initialContentInIndex'
)
This way the component template will have initial index content and it will be parsed by angular.
More about Reflect here

#Yaroslav, expanding on your solution:
Looks like a transclusion (in Angular 1 terms), so in Angular 2 you can use ng-content on the inner component.
<div class="my-component">
<ng-content></ng-content>
</div>
To get interpolation working on outer transcluded markup, give the element an id and prefix the interpolated content with it.
<my-component #comp>
This is my transcluded content! ++{{comp.title}}++
</my-component>
Don't try to transclude from index.html, it's not an angular component, so it doesn't seem to work as the outer component. If you use app.component as the outer and another my.component as inner, it works.
Here's a fork of your plunkr with the changes. plnkr
For reference, I used Todd Motto's excellent article on angular 2 transclusion: ref here.
The angular guide only vaguely refers to ng-content (with a link that 404's), so I wonder if it's disappearing. May be superseded by ngComponentOutlet ref here