Angular 2: What is an #Input/#Output alias? - javascript

While reading about #Input() and #Output() I have found that we can use an alias instead of using the property name for the decorators.
Example
class ProductImage {
//Aliased
#Input('myProduct') product: string;
//Un-aliased
#Input() product: string;//not aliased
}
HTML
//Aliased attribute
<SomeComponent [myProduct] = "Product Name"></SomeComponent>
//Un-aliased attribute
<SomeComponent [product] = "Product Name"></SomeComponent>
The official Angular documentation says:
Sometimes we want the public name of an input/output property to be different from the internal name.
This is frequently the case with attribute directives. Directive consumers expect to bind to the name of the directive. For example, when we apply a directive with a myClick selector to a tag, we expect to bind to an event property that is also called myClick.
And This tutorial briefly explains it:
an alias let's me override the property name to be the alias instead of the original property name
Other than that I have not been able to find anything else on aliasing #Input() and #Output() on SO or through Google.
Things I would like to know are:
What does 'aliasing' attempt to achieve?
Is 'aliasing' something that we should be using regularly?

It's like your name and your nickname.
Inside your family you might be called Nic, where as , outside your family in order for other to know you legally , you should be called Nicolas.
So, if we consider the class of your component , the inside of your family :
#Component({
selector:'my-component'
})
export class MyComponent{
#Output('nicolas') nic = new EventEmitter<any>();
someFunction(){
// because we're inside the family ( inside this class ), instead of nicolas , we can call nic like this :
this.nic ...... ( which you'd normally emit an event ).
}
}
But from outside, you're still nicolas , so when someone want's to call you ( use that event emitter ) it should use nicolas;
<my-component (nicolas)="onNicolasChanged($event)"></my-component>
Note that we can't do this :
<my-component (nic)="onNicolasChanged($event)"></my-component>
This is aliasing that variable.
Also , please read my answer here :

What does 'aliasing' attempt to achieve?
it simply renames the input/output variable as per your needs. For example, if there is a hero object and when it is selected it is passed to another component. In that case it would be appropriate to call it selectedHero . Aliasing simply achieves that.
#Input('selectedHero') hero: string;
Is 'aliasing' something that we should be using regularly?
Depends on the context you are working on. Its not a necessity. For example it can be used to avoid conflicts in variable names , or for readability of the code.

Actually #Input is used when we are sending data of a parent component to child component and #Output is vice-versa. Example is
parent.component.html
<p> Child first name is {{childfirstname}}</p>
<input placeholder="First Name" type="text" [(ngModel)]="firstname">
<button mat-button (click)="send()">Click Parent</button>
<app-child
[firstname]="firstname"
(sendfirstname)="reciveFirstname($event)"
*ngIf="flage">
<app-child>
ParentComponent.ts
import { Component } from '#angular/core';
#Component({
selector:.......
)}
export class ParentComponent {
flage: boolean = false;
firstname: string;
childfirstname: string;
}
send() {
this.flage = true;
}
reciveFirstname(firstname) {
this.childfirstname = firstname;
}
Child.component.html
<p> Parent first name is {{firstname}} <br>
parent last name is {{lastname}} </p>
<input placeholder="First Name" type="text" [(ngModel)]="firstnamechild">
<button mat-button (click)="send">Send Parent</button>
child.component.ts
import { Component,Input, Output, EventEmitter } from '#angular/core';
#Component({
selector:'app-child',
........
})
export class ChildComponent {
firstnamechild: string;
#Input() firstname: string;
#Output()
sendfirstname: EventEmitter<string> = new EventEmitter<string>();
constructor() {}
send() {
this.sendfirstname.emit(this.firstnamechild);
}
}

A good reason to use it is if you ever need to change the variable name in the component, you don't need to change it in your template because it's using the alias. It's a simple way to prevent your code from breaking if another dev ever changes that variable name.

Related

Angular: Show difference between Two Class Components

I have a Parent component. It injects data into two #Input() Child duplicate card components, showing html. In addition, there is difference class in parent, flagging difference between the two classes .
When displaying class members in html below, is there method to highlight items which have changed in, Without Modifying Child Components? Prefer not to inject difference logic in child card components. Would rather have the parent controller highlight differences, without overall logic leaking into child components.
All child components have same css class referring to member name, .city refers to city, .zipcode pertains to item zipcode,
Might need to create javascript function, and then applying in Angular in ngOnit, still researching, trying to apply this answer maybe? Generate dynamic css based on variables angular
export class PropertyLocation {
streetName: string;
streetType: string;
postdirectional?: string;
unitNumber?: string;
unitType?: string;
city: string;
state?: string;
zipcode: number;
effectiveStartDate: Date;
addressChangeReason?: AddressChangeReasonDto;
addressSource?: SourceOfAddressDto;
}
Difference class: feel free to restructure class in parent, to make solution easier if required
export class DifferenceClass {
ClassMember: string;
DifferentFlag: boolean;
}
derived from
function isSame(obj1:any, obj2:any): DifferenceClass {
let difference: DifferenceClass[];
for (const key in obj1) {
if (obj1[key] !== obj2[key]) {
differences.push(new DifferenceClass(key,true));
}
else
differences.push(new DifferenceClass(key,false));
}
return differences;
}
A custom Directive is helpful to separate some UI logic from the Component class.
Example:
#Directive({
selector: '[highlighter]',
})
#Input('streetName') streetName: string;
export class HighlighterDirective {
constructor(private host: ElementRef,
private rd: Renderer2) {}
}
ngOnChanges(changes: SimpleChanges) {
if (changes['streetName'].currentValue != changes['streetName'].previousValue) {
this.rd.setStyle(this.host.nativeElement, 'color', 'red')
}
}
p.s. code is completely from my memory, could be some types, syntax errors. But you get the idea - Directive has access to the same inputs defined on the component:
<custom-component [streetName] highlighter></custom-component>
Then you can use ngOnChanges or other technique to distinguish when the property has changed its value and use Renderer2 (for the best practices), to apply direct changes to the DOM.

Angular - Cannot get parent component data

I'm passing a function as parameter from parent to child component. When click event is occurred, function of parent component trigger, but all the property of parent component is undefined. For example,
Parent Component
export class AppComponent implements OnInit {
constructor( private notificationService: NotificationService ) {}
unreadNotification(): Observable<any> {
// here this.notificationService is undefined
console.log( this.notificationService );
}
}
Parent html
<notification-menu [unread]= "unreadNotification"></notification-menu>
child Component
export class NotificationMenuComponent implements OnInit {
#Input() updateUnread: Function;
}
child html
<button type="button" class="icon-button" (click)="updateUnread()">
</button>
Now when I click on notification button, unreadNotification is triggered, but value of this.notificationService in console.log is undefined.
How can I solve this?
You should use #Input() to pass values from parent to child and #Output() to pass values from child to parent.
Child HTML:
<button type="button" class="icon-button" (click)="update()">
</button>
Child Component:
export class NotificationMenuComponent implements OnInit {
#Output() updateUnread = new EventEmitter<string>();
update() {
this.updateUnread.emit("I am working man!");
}
}
Parent HTML:
<notification-menu (updateUnread)= "unreadNotification($event)"></notification-menu>
Parent Component:
export class AppComponent implements OnInit {
constructor( private notificationService: NotificationService ) {}
unreadNotification(dataFromChild: string) {
console.log(dataFromChild);
}
}
The answer from #nimeresam is good advice - using an #Output is an idomatic way to achieve this.
It's worth noting though, that the reason that your original solution doesn't work is due to the way that javascript handles the this context.
Writing (click)="updateUnread()" is equivalent to saying this.updateUnread() with this being NotificationMenuComponent - as notificationService does not exist on NotificationMenuComponent you get the undefined error.
To have the context of the parent component used, you would need to bind the context to the updateUnread function before passing it into the child component.
This can be achieved either by converting the function to be an arrow functionn, or using Function.bind
See:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind
It's normally a good idea to enable the typescript option for --noImplicitThis to help catch these errors (though unsure if it will detect it in this case)
You can use arrow function so that you can use parent component's information. You can try as like as given below.
updateUnreadNotification = () => {
// by using arrow function you can get notificationService information
console.log( this.notificationService );
}
Hope your problem will be solve by this.

How can I access DOM elements in angular

I am tetsing a template driven form in angular, just testing not validating it.
I have read that it can be done using a viewChild property but it seems to not work for me.
I create a reference like this in my one of my forms label:
<label #ref id=.. class=...>
And now in my component I do this:
#ViewChild('ref') ref:ElementRef;
So, I suppose I created a valiable of type ElementRef that is viewChild of my input. So now I can use ref in my tests.
Inside my tests I do this:
let ref: HTMLElement:
it(....=>
{
ref = fixture.debugElement.query(By.css('ref')).nativeElement;
fixture.detectChanges();
expect(ref.innerHTML)toContain('Name');// or whatever
}
)
Now consider that the test, html and component files are separated from one another.
I still get errors of nativeElemnt property cannot be read. eventhough I have imported ElemntRef.
Is this the right way to access the DOM elemnts?? Or this viewChild doesnt make a referece to my label??
And again can I use the ID to access the form elements? What I have read they use a reference with #.
Thanks!!
For direct access to DOM in Angular you can make judicious use of ElementRef
However Direct access to DOM elements is not a good practice because
it leaves you vulnerable to XSS attacks.
Your AppComponent
import {Component, ElementRef} from '#angular/core';
#Component({
selector: 'my-app'
})
export class AppComponent implements ngOnInit {
constructor(private _elementRef : ElementRef) { }
ngOnInit(): void
{
this.ModifyDOMElement();
}
ModifyDOMElement() : void
{
//Do whatever you wish with the DOM element.
let domElement = this._elementRef.nativeElement.querySelector(`#someID`);
}
}
Your HTML
<p id="someID"></p>

Angular4 - No value accessor for form control

I have a custom element :
<div formControlName="surveyType">
<div *ngFor="let type of surveyTypes"
(click)="onSelectType(type)"
[class.selected]="type === selectedType">
<md-icon>{{ type.icon }}</md-icon>
<span>{{ type.description }}</span>
</div>
</div>
When I try to add the formControlName, I get an error message:
ERROR Error: No value accessor for form control with name:
'surveyType'
I tried to add ngDefaultControl without success.
It seems it's because there is no input/select... and I dont know what to do.
I would like to bind my click to this formControl in order that when someone clicks on the entire card that would push my 'type' into the formControl. Is it possible?
You can use formControlName only on directives which implement ControlValueAccessor.
Implement the interface
So, in order to do what you want, you have to create a component which implements ControlValueAccessor, which means implementing the following three functions:
writeValue (tells Angular how to write value from model into view)
registerOnChange (registers a handler function that is called when the view changes)
registerOnTouched (registers a handler to be called when the component receives a touch event, useful for knowing if the component has been focused).
Register a provider
Then, you have to tell Angular that this directive is a ControlValueAccessor (interface is not gonna cut it since it is stripped from the code when TypeScript is compiled to JavaScript). You do this by registering a provider.
The provider should provide NG_VALUE_ACCESSOR and use an existing value. You'll also need a forwardRef here. Note that NG_VALUE_ACCESSOR should be a multi provider.
For example, if your custom directive is named MyControlComponent, you should add something along the following lines inside the object passed to #Component decorator:
providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: forwardRef(() => MyControlComponent),
}
]
Usage
Your component is ready to be used. With template-driven forms, ngModel binding will now work properly.
With reactive forms, you can now properly use formControlName and the form control will behave as expected.
Resources
Custom Form Controls in Angular by Thoughtram
Angular Custom Form Controls with Reactive Forms and NgModel by Cory Rylan
You should use formControlName="surveyType" on an input and not on a div
The error means, that Angular doesn't know what to do when you put a formControl on a div.
To fix this, you have two options.
You put the formControlName on an element, that is supported by Angular out of the box. Those are: input, textarea and select.
You implement the ControlValueAccessor interface. By doing so, you're telling Angular "how to access the value of your control" (hence the name). Or in simple terms: What to do, when you put a formControlName on an element, that doesn't naturally have a value associated with it.
Now, implementing the ControlValueAccessor interface can be a bit daunting at first. Especially because there isn't much good documentation of this out there and you need to add a lot of boilerplate to your code. So let me try to break this down in some simple-to-follow steps.
Move your form control into its own component
In order to implement the ControlValueAccessor, you need to create a new component (or directive). Move the code related to your form control there. Like this it will also be easily reusable. Having a control already inside a component might be the reason in the first place, why you need to implement the ControlValueAccessor interface, because otherwise you will not be able to use your custom component together with Angular forms.
Add the boilerplate to your code
Implementing the ControlValueAccessor interface is quite verbose, here's the boilerplate that comes with it:
import {Component, OnInit, forwardRef} from '#angular/core';
import {ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR} from '#angular/forms';
#Component({
selector: 'app-custom-input',
templateUrl: './custom-input.component.html',
styleUrls: ['./custom-input.component.scss'],
// a) copy paste this providers property (adjust the component name in the forward ref)
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomInputComponent),
multi: true
}
]
})
// b) Add "implements ControlValueAccessor"
export class CustomInputComponent implements ControlValueAccessor {
// c) copy paste this code
onChange: any = () => {}
onTouch: any = () => {}
registerOnChange(fn: any): void {
this.onChange = fn;
}
registerOnTouched(fn: any): void {
this.onTouch = fn;
}
// d) copy paste this code
writeValue(input: string) {
// TODO
}
So what are the individual parts doing?
a) Lets Angular know during runtime that you implemented the ControlValueAccessor interface
b) Makes sure you're implementing the ControlValueAccessor interface
c) This is probably the most confusing part. Basically what you're doing is, you give Angular the means to override your class properties/methods onChange and onTouch with it's own implementation during runtime, such that you can then call those functions. So this point is important to understand: You don't need to implement onChange and onTouch yourself (other than the initial empty implementation). The only thing your doing with (c) is to let Angular attach it's own functions to your class. Why? So you can then call the onChange and onTouch methods provided by Angular at the appropriate time. We'll see how this works down below.
d) We'll also see how the writeValue method works in the next section, when we implement it. I've put it here, so all required properties on ControlValueAccessor are implemented and your code still compiles.
Implement writeValue
What writeValue does, is to do something inside your custom component, when the form control is changed on the outside. So for example, if you have named your custom form control component app-custom-input and you'd be using it in the parent component like this:
<form [formGroup]="form">
<app-custom-input formControlName="myFormControl"></app-custom-input>
</form>
then writeValue gets triggered whenever the parent component somehow changes the value of myFormControl. This could be for example during the initialization of the form (this.form = this.formBuilder.group({myFormControl: ""});) or on a form reset this.form.reset();.
What you'll typically want to do if the value of the form control changes on the outside, is to write it to a local variable which represents the form control value. For example, if your CustomInputComponent revolves around a text based form control, it could look like this:
writeValue(input: string) {
this.input = input;
}
and in the html of CustomInputComponent:
<input type="text"
[ngModel]="input">
You could also write it directly to the input element as described in the Angular docs.
Now you have handled what happens inside of your component when something changes outside. Now let's look at the other direction. How do you inform the outside world when something changes inside of your component?
Calling onChange
The next step is to inform the parent component about changes inside of your CustomInputComponent. This is where the onChange and onTouch functions from (c) from above come into play. By calling those functions you can inform the outside about changes inside your component. In order to propagate changes of the value to the outside, you need to call onChange with the new value as the argument. For example, if the user types something in the input field in your custom component, you call onChange with the updated value:
<input type="text"
[ngModel]="input"
(ngModelChange)="onChange($event)">
If you check the implementation (c) from above again, you'll see what's happening: Angular bound it's own implementation to the onChange class property. That implementation expects one argument, which is the updated control value. What you're doing now is you're calling that method and thus letting Angular know about the change. Angular will now go ahead and change the form value on the outside. This is the key part in all this. You told Angular when it should update the form control and with what value by calling onChange. You've given it the means to "access the control value".
By the way: The name onChange is chosen by me. You could choose anything here, for example propagateChange or similar. However you name it though, it will be the same function that takes one argument, that is provided by Angular and that is bound to your class by the registerOnChange method during runtime.
Calling onTouch
Since form controls can be "touched", you should also give Angular the means to understand when your custom form control is touched. You can do it, you guessed it, by calling the onTouch function. So for our example here, if you want to stay compliant with how Angular is doing it for the out-of-the-box form controls, you should call onTouch when the input field is blurred:
<input type="text"
[(ngModel)]="input"
(ngModelChange)="onChange($event)"
(blur)="onTouch()">
Again, onTouch is a name chosen by me, but what it's actual function is provided by Angular and it takes zero arguments. Which makes sense, since you're just letting Angular know, that the form control has been touched.
Putting it all together
So how does that look when it comes all together? It should look like this:
// custom-input.component.ts
import {Component, OnInit, forwardRef} from '#angular/core';
import {ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR} from '#angular/forms';
#Component({
selector: 'app-custom-input',
templateUrl: './custom-input.component.html',
styleUrls: ['./custom-input.component.scss'],
// Step 1: copy paste this providers property
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomInputComponent),
multi: true
}
]
})
// Step 2: Add "implements ControlValueAccessor"
export class CustomInputComponent implements ControlValueAccessor {
// Step 3: Copy paste this stuff here
onChange: any = () => {}
onTouch: any = () => {}
registerOnChange(fn: any): void {
this.onChange = fn;
}
registerOnTouched(fn: any): void {
this.onTouch = fn;
}
// Step 4: Define what should happen in this component, if something changes outside
input: string;
writeValue(input: string) {
this.input = input;
}
// Step 5: Handle what should happen on the outside, if something changes on the inside
// in this simple case, we've handled all of that in the .html
// a) we've bound to the local variable with ngModel
// b) we emit to the ouside by calling onChange on ngModelChange
}
// custom-input.component.html
<input type="text"
[(ngModel)]="input"
(ngModelChange)="onChange($event)"
(blur)="onTouch()">
// parent.component.html
<app-custom-input [formControl]="inputTwo"></app-custom-input>
// OR
<form [formGroup]="form" >
<app-custom-input formControlName="myFormControl"></app-custom-input>
</form>
More Examples
Example with Input: https://stackblitz.com/edit/angular-control-value-accessor-simple-example-tsmean
Example with Lazy Loaded Input: https://stackblitz.com/edit/angular-control-value-accessor-lazy-input-example-tsmean
Example with Button: https://stackblitz.com/edit/angular-control-value-accessor-button-example-tsmean
Nested Forms
Note that Control Value Accessors are NOT the right tool for nested form groups. For nested form groups you can simply use an #Input() subform instead. Control Value Accessors are meant to wrap controls, not groups! See this example how to use an input for a nested form: https://stackblitz.com/edit/angular-nested-forms-input-2
Sources
https://angular.io/api/forms/ControlValueAccessor
https://www.tsmean.com/articles/angular/angular-control-value-accessor-example/
For me it was due to "multiple" attribute on select input control as Angular has different ValueAccessor for this type of control.
const countryControl = new FormControl();
And inside template use like this
<select multiple name="countries" [formControl]="countryControl">
<option *ngFor="let country of countries" [ngValue]="country">
{{ country.name }}
</option>
</select>
More details ref Official Docs

Angular — an undocumented child-to-parent communication?

After reading this section about component interaction — I've noticed that there is another way of communicating from child to parent ( which wasn't really documented there) :
It turns out that if I have a parent class :
#Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
<my-item></my-item>
</div>
`,
})
export class App {
name:string;
go1()
{
alert(2)
}
constructor() {}
}
And in the child component - I Inject a parent type into the ctor :
#Component({
selector: 'my-item',
template: `
<div>
<input type="button" value='invoke parent method' (click) = "myGo()"/>
</div>
`,
})
class MyItem {
name:string;
private parent1 : App;
myGo()
{
this.parent1.go1() //<--- access is available here
}
constructor(private parent1 : App)
{
this.parent1 = parent1; //<------------ manually, unlike service
this.name = `Angular! v${VERSION.full}`
}
}
Then Angular sees that i'm trying to inject a parent type class and it gives me access to it.
The click works of course.
Question:
Beside other alternatives which I already know , is it documented anywhere ? or is it just a feature that I can't rely on it
plnkr
This works well and can be used.
A major downside is, that it breaks encapsulation.
The child component needs to know about the parent component.
This approach makes the child tightly coupled to it's parent, which is usually considered a bad thing because it prevents the component to be re-used anywhere within your application, because it now only works as a child of this exact parent.

Categories

Resources