Develop Reference

Is there a way I can dynamically set the formControlName on an <input> element in angular?

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

Angular 4 data binding concept

I am creating an Angular app and need some help with the data binding.
I have a Dashboard where I have different Widgets. Every Widget has a name and a date.
To configure/change this settings I have created a Sidebar that can be shown.
I am using a router to display the dashboard view. And the sidebar is not a children of the dashboard it is outside of the router.
When I click on the settings button on a Widget the Sidebar should open and should be able to show and change the settings of this Widget and than the Widget should run an update function.
I have already tried to work with a shared service but I dont think that this is the best solution because I have multiple Widgets each with different settings object.

Shared Service is the way to go about the things over here , As there is no parent child Relationship Between Components you cannot use Event Emitters.
If you want to take things up a notch and go for a cleaner Design pattern go Ngrx Suite. It is tailor maid for such scenarios but keep in mind it will reqire some additional dependencies and also bit more code.
Go for Ngrx is the app is Large else stick to shared services.

A shared service is a good call for this scenario, since you won't be able to bind to your click event in your router-outlet tag.
Let's say you have a component (pseudocode):
class MyWidget {
widgetData: Object;
constructor(private myService: MyService) { }
handleClick(event) {
this.myService.sendClick({event, data:this.widgetData})
}
}
Then in your service, you can use a Subject to keep store the data that is needed for your Sidebar component.
Example service (psuedocode):
class MyService {
subject = new Subject();
sendClick(data) {
this.subject.next(data);
}
getClick(data) {
return this.subject.asObservable();
}
}
Finally, your Sidebar will be able to Subscribe to the getClick() method from your service:
class Sidebar {
widgetData: Object;
constructor(private myService: MyService) {
myService.getClick()
.subscribe(v => doSomethingWithWidgetData(v));
}
}
For another resource: this blogpost has a good explanation of this concept.

You cannot use Event Emitters since there is no relationship between two components, so ideal way would be to use is Shared Service.

Angular - ViewContainerRef availability timing?

Looking at a rough implementation of ngIf :
#Directive({ selector: '[myNgIf]'})
export class MyNgIfDirective {
constructor(
private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef) { }
#Input() set myNgIf(condition: boolean) {
if (condition) {
this.viewContainer.createEmbeddedView(this.templateRef);
} else {
this.viewContainer.clear();
}
}
}
Getter and setter of input are set initially and raise the ngOnchanges event. This is the first event even before ngInit.
But In that setter we are actually using the viewContainer (which is type of <ViewContainerRef>) - but how come it has access to it at the stage ?
Question
I was expecting to see this line :
this.viewContainer.createEmbeddedView(this.templateRef) ,
— at a later-Already-available-view-stage such as ngAfterViewInit - so how come it still works and have access to view container?
I already know about * which desugar it to a template syntax but still I don't understand how view-container is already available at that stage.

You probably know that every element can be used as a view container. So a directive applied to any element can inject the view container associated with the element it's applied on into constructor:
#Directive({
selector: '[adir]'
})
export class ADirective {
constructor(private vc: ViewContainerRef) {
console.log(this.vc.element.nativeElement.nodeName); // `DIV`
}
And I can apply the directive to any element:
<div adir></div>
And this is essentially how ngIf gets access to the view container.
What's even more interesting is that Angular processes #ViewChild queries before the digest starts and so the static #ViewChild elements are available in ngOnInit. It means that you can do like this:
#ViewChild('vc', {read: ViewContainerRef}) vc;
ngOnInit() {
this.vc; // already available
}

Access custom directive with ViewChild / ContentChild

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

Angular 2.x selecting DOM element

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