angular 6 component property use - angular

I was looking into angular 6+ code and I am not sure what is this piece code #testPicker ? what is this syntax and why is it used? My question is not specific to this code but generally what is use of #testPicker in this component.
<app-name-picker [readonly]="isValidForm()" [value]="selectedUser" (selectionChange)="selectUser($event)" #testPicker></app-name-picker>

In angular the Hashtag is referred to as a Template Reference Variable.
It is usually used to provide access to a component (and its data) from other components or from within a parent component's code.
From other components, Eg:
<input #phone placeholder="phone number">
<button (click)="callPhone(phone.value)">Call</button>
From parent component code, using ViewChild, Eg:
#ViewChild('phone') phoneNumber;
ngAfterViewInit(){
callPhoneNumber(this.phoneNumber.nativeElement.value);
}
Further Reading and Reference: https://angular.io/guide/template-syntax#template-reference-variables--var-

We use this declarative approach to have opportunity to access elements in the view directly.
For example:
<input #myname>
#ViewChild('myname') input;
ngAfterViewInit() {
console.log(this.input.nativeElement.value);
}
Documentation

here hashtag mean reference of that html, so giving Template Reference Variable allow you to access that DOM to Component.
#ViewChild('divReference') divReference;
ngAfterViewInIt(){
console.log(this.divReference);
}
it is like document.getElementById('divReference') in Java Script.

Related

angular passing input to child components in ng-content

I want to pass some properties from a parent component to a child component using content projection, is that possible?
For e.g. this is my template:
<my-form [display]="'horiz'">
Email: <my-input [type]="'email'" ...></my-input>
Name: <my-input [type]="'name'" [display]="'vert'" ...></my-input>
...
</my-form>
Now the my-form component has the template like this:
<form ...>
<ng-content></ng-content>
</form>
What I want is that the display property of my-form can be accessed by the my-input components, such that it can be overriden by the my-input component as well, like it is for the Name input.
Is that possible?
You can use #ContentChildren , made an example on stackblitz:
https://stackblitz.com/edit/angular-content-children-example
I have modified the values in the ngAfterViewInit using the component references from the ContentChildren.
Hope it helps. Feel free to update the code if any better approach is there.

Add directive to children from parent directive

In AngularJS we used to have the pre and post functions, and the ability to $compile templates when needed. There is no way of doing this in Angular (2+), is there?
Specifically, what I want to achieve is, having a template like this:
<form myDirective>
<input type="text" />
<input type="text" />
</form>
Make myDirective add dynamically another directive (say anotherDirective) to all the host's children of type input. Is that possible somehow?
No it's not possible. You cannot assign a directive dynamically, be it in another directive or a full component (a component is considered a directive with a template in Angular).
The only way to dynamically manipulate hard (eg not CSS) DOM properties is by using Renderer2 and accessing the host's element's children in your myDirective like this:
constructor(private hostEl: ElementRef){}
ngOnInit() {
if(hostEl.nativeElement.children.length) {
hostEl.nativeElement.children.forEach(el => {if (isInput(el) { useRenderer2InSomeWay(el) })})
}
}
But what I would do is either to put anotherDirective in each input directly, so you don't have to access children or (even better) consider not using a directive at all but just define a wrapper component for <input>:
<my-input-wrapper
<input
[config]="someConfigToApplyToInputInside"
[formControlName]="'foobar'">
</input>
</my-input-wrapper>
and in the MyInputWrapperComponent:
#ContentChildren('input') inputs: QueryList<any>;
With ContentChild/ContentChildren you can access FormControls from the surrounding component but still delegate ui-stuff like custom placeholders and icons you want to have in the input, to the wrapper-component.

Reset specific input text value when method call

how to clear textbox value from another component.
app.component.html
<input id="search"
type="text"
class="form-control"
name="criteria"
placeholder="Search000"
[(ngModel)]="_criteria"
(ngModelChange)="criteriaChange()"
>
Try this one, Angular 2 changing component variables on another component
This all depends on the relationship of these components and if you can get a handle of this component directly. Ex. in the testing case, I can easily change the property of any component.
Personally, I would just utilize JQuery and on the angular click event, I would just clear out the value; but if you want to use angular.
One way of achieving this is by utilizing #ViewChild
#ViewChild(NameOfComponent) nameOfComponent: NameOfComponent;
this.nameOfComponent.whatEverYouWantToAccess.

#ViewChild angular 2 not working width ion-textarea

I want to get the value of ion-textarea inside component in Ionic 2 but I have always this error
Cannot read property 'value' of undefined
Code HTML:
<ion-textarea #preferences id="preferences" placeholder="Veuillez mentionner vos préferences"></ion-textarea>
component .ts:
#ViewChild('preferences') m_preferences;
let preferences : this.m_preferences.nativeElement.value;
When you apply template reference variable on component element then by default you will get a component instance.
How to get reference of the component associated with ElementRef in Angular 2
In your case you applied preferences to ion-textarea component. It's TextInput component that has value property
https://github.com/ionic-team/ionic/blob/fed4fd95d2545c324c45d891b837e2bcc4ded79d/src/components/input/input.ts#L144
So you should simple do like this:
import { TextInput } from 'ionic-angular';
...
#ViewChild('preferences') m_preferences: TextInput;
addProduct() {
console.log(this.m_preferences.value);
}
I also prepared Stackblitz Example
You can also do it without ViewChild:
<ion-textarea #preferences ...></ion-textarea>
<button (click)="addProduct(preferences.value)">Add product</button>
addProduct(value) {
alert(value)
}
Stackblitz Example
If you deal with angular forms then consider #GreyBeardedGeek answer
From the documentation:
Note that must load its value from the value or [(ngModel)] attribute. Unlike the native element, does not support loading its value from the textarea's inner content.
So, what you are trying to do is not.supported.
You should bind a property to the control instead.

What does #id in input tag mean?

From this Angular.io tutorial, I show:
<input #searchBox id="search-box" (keyup)="search(searchBox.value)" />
where I do not understand this: #searchBox. Can someone explain?
The hashtag reminds me of the jQuery selector for ids, but I am not quite sure what this means here, since we already have an id.
That is a template reference variable.
See more in details here: https://angular.io/guide/template-syntax#ref-vars
In simple words:
Its called a template reference variable (aka reference variable) since it is declared in template and often consumed in Javascript(typescript).
A template reference variable is similar to var id(but not identical) which can be used to refer pretty much any DOM element (HTML element, Directive, Component) in template.
Template Reference variable are also available in Reactjs.
In angular you can use #somename or ref-somename to declare a template reference variable.
So how do i use these TRV(Template Reference variable) that's when you should look into library documentation
It is used as an element selector within a component...
component.html
<input #searchBox id="search-box" (keyup)="search(searchBox.value)" value='4'/>
component.ts
#ViewChild('searchBox') input;
ngAfterViewInit() {
console.log(input.nativeElement); // logs the javascript object for the element.
console.log(this.input.nativeElement.value); // logs 4
}
A template reference is used to give your controlling class a reference to an element. #searchBox will give you a reference to your input element if you define it in typescript like:
#ViewChild('searchBox') searchBox;
now you can use that reference to control or ask from your input element like:
this.searchBox.nativeElement.focus();
This is template reference variable
they are usually declared #variable and can be used anywhere in the template.
In this particular scenario #searchBox is declare the variable which will store the value of whatever is entered in textbox.
Moreover you can also see the use of this template variable #searchBox in keyup function were it is used to read the value itself. In same way you can use this variable anywhere in your code.
Template Reference Variable using Select Box
<select #myColor (change) = "setData(myColor.value)"></select>
look at the code snippet, #myColor is a template reference variable. The selected value of select box can be accessed by myColor.value
Template Reference Variable with NgForm
how to access NgForm directive using template reference variable
<form (ngSubmit)="onSubmitPersonForm(myForm)" #myForm="ngForm">
<input name="name" required [(ngModel)]="person.pname">
<button type="submit" [disabled]="!myForm.form.valid">Submit</button>
</form>
ngSubmit: It enables binding angular expressions to onsubmit event of the form. Here on form submit onSubmitPersonForm component method will be called.
ngForm: It is the nestable alias of form directive
Here we are using template reference variable for ngForm as #myForm="ngForm" . Now we can use myForm in place of ngForm such as to check form validity and we can also use it in our angular
Template Reference Variable using Input Text Box
Template reference variable is a variable using which we can access DOM properties. In our example, we are using following DOM properties of the input box.
<input type="text" #mobile placeholder="Enter Mobile Number">
In the above input text box, #mobile is a template reference variable. To fetch DOM properties, we do as follows.
mobile.placeholder: It will give placeholder of our text box if we have specified.
mobile.value: It will give the value of our text box.
mobile.type: It will give the type of input element. In our example type is text.

Resources