Develop Reference

Losing the focus on an input that appears conditionally - Angular 7 [duplicate]

I am working a front-end application with Angular 5, and I need to have a search box hidden, but on click of a button, the search box should be displayed and focused.
I have tried a few ways found on StackOverflow with directive or so, but can't succeed.
Here is the sample code:
#Component({
selector: 'my-app',
template: `
<div>
<h2>Hello</h2>
</div>
<button (click) ="showSearch()">Show Search</button>
<p></p>
<form>
<div >
<input *ngIf="show" #search type="text" />
</div>
</form>
`,
})
export class App implements AfterViewInit {
#ViewChild('search') searchElement: ElementRef;
show: false;
name:string;
constructor() {
}
showSearch(){
this.show = !this.show;
this.searchElement.nativeElement.focus();
alert("focus");
}
ngAfterViewInit() {
this.firstNameElement.nativeElement.focus();
}
The search box is not set to focus.
How can I do that?

Edit 2022:
Read a more modern way with #Cichy's answer below
Modify the show search method like this
showSearch(){
this.show = !this.show;
setTimeout(()=>{ // this will make the execution after the above boolean has changed
this.searchElement.nativeElement.focus();
},0);
}

You should use HTML autofocus for this:
<input *ngIf="show" #search type="text" autofocus />
Note: if your component is persisted and reused, it will only autofocus the first time the fragment is attached. This can be overcome by having a global DOM listener that checks for autofocus attribute inside a DOM fragment when it is attached and then reapplying it or focus via JavaScript.
Here is an example global listener, it only needs to be placed in your spa application once and autofocus will function regardless of how many times the same fragment is reused:
(new MutationObserver(function (mutations, observer) {
for (let i = 0; i < mutations.length; i++) {
const m = mutations[i];
if (m.type == 'childList') {
for (let k = 0; k < m.addedNodes.length; k++) {
const autofocuses = m.addedNodes[k].querySelectorAll("[autofocus]"); //Note: this ignores the fragment's root element
console.log(autofocuses);
if (autofocuses.length) {
const a = autofocuses[autofocuses.length - 1]; // focus last autofocus element
a.focus();
a.select();
}
}
}
}
})).observe(document.body, { attributes: false, childList: true, subtree: true });

This directive will instantly focus and select any text in the element as soon as it's displayed. This might require a setTimeout for some cases, it has not been tested much.
import { Directive, ElementRef, OnInit } from '#angular/core';
#Directive({
selector: '[appPrefixFocusAndSelect]',
})
export class FocusOnShowDirective implements OnInit {
constructor(private el: ElementRef) {
if (!el.nativeElement['focus']) {
throw new Error('Element does not accept focus.');
}
}
ngOnInit(): void {
const input: HTMLInputElement = this.el.nativeElement as HTMLInputElement;
input.focus();
input.select();
}
}
And in the HTML:
<mat-form-field>
<input matInput type="text" appPrefixFocusAndSelect [value]="'etc'">
</mat-form-field>

html of component:
<input [cdkTrapFocusAutoCapture]="show" [cdkTrapFocus]="show">
controler of component:
showSearch() {
this.show = !this.show;
}
..and do not forget about import A11yModule from #angular/cdk/a11y
import { A11yModule } from '#angular/cdk/a11y'

I'm going to weigh in on this (Angular 7 Solution)
input [appFocus]="focus"....
import {AfterViewInit, Directive, ElementRef, Input,} from '#angular/core';
#Directive({
selector: 'input[appFocus]',
})
export class FocusDirective implements AfterViewInit {
#Input('appFocus')
private focused: boolean = false;
constructor(public element: ElementRef<HTMLElement>) {
}
ngAfterViewInit(): void {
// ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.
if (this.focused) {
setTimeout(() => this.element.nativeElement.focus(), 0);
}
}
}

This is working i Angular 8 without setTimeout:
import {AfterContentChecked, Directive, ElementRef} from '#angular/core';
#Directive({
selector: 'input[inputAutoFocus]'
})
export class InputFocusDirective implements AfterContentChecked {
constructor(private element: ElementRef<HTMLInputElement>) {}
ngAfterContentChecked(): void {
this.element.nativeElement.focus();
}
}
Explanation:
Ok so this works because of: Change detection. It's the same reason that setTimout works, but when running a setTimeout in Angular it will bypass Zone.js and run all checks again, and it works because when the setTimeout is complete all changes are completed. With the correct lifecycle hook (AfterContentChecked) the same result can be be reached, but with the advantage that the extra cycle won't be run. The function will fire when all changes are checked and passed, and runs after the hooks AfterContentInit and DoCheck. If i'm wrong here please correct me.
More one lifecycles and change detection on https://angular.io/guide/lifecycle-hooks
UPDATE:
I found an even better way to do this if one is using Angular Material CDK, the a11y-package.
First import A11yModule in the the module declaring the component you have the input-field in.
Then use cdkTrapFocus and cdkTrapFocusAutoCapture directives and use like this in html and set tabIndex on the input:
<div class="dropdown" cdkTrapFocus cdkTrapFocusAutoCapture>
<input type="text tabIndex="0">
</div>
We had some issues with our dropdowns regarding positioning and responsiveness and started using the OverlayModule from the cdk instead, and this method using A11yModule works flawlessly.

In Angular, within HTML itself, you can set focus to input on click of a button.
<button (click)="myInput.focus()">Click Me</button>
<input #myInput></input>

To make the execution after the boolean has changed and avoid the usage of timeout you can do:
import { ChangeDetectorRef } from '#angular/core';
constructor(private cd: ChangeDetectorRef) {}
showSearch(){
this.show = !this.show;
this.cd.detectChanges();
this.searchElement.nativeElement.focus();
}

I'm having same scenario, this worked for me but i'm not having the "hide/show" feature you have. So perhaps you could first check if you get the focus when you have the field always visible, and then try to solve why does not work when you change visibility (probably that's why you need to apply a sleep or a promise)
To set focus, this is the only change you need to do:
your Html mat input should be:
<input #yourControlName matInput>
in your TS class, reference like this in the variables section (
export class blabla...
#ViewChild("yourControlName") yourControl : ElementRef;
Your button it's fine, calling:
showSearch(){
///blabla... then finally:
this.yourControl.nativeElement.focus();
}
and that's it.
You can check this solution on this post that I found, so thanks to -->
https://codeburst.io/focusing-on-form-elements-the-angular-way-e9a78725c04f

There is also a DOM attribute called cdkFocusInitial which works for me on inputs.
You can read more about it here: https://material.angular.io/cdk/a11y/overview

Only using Angular Template
<input type="text" #searchText>
<span (click)="searchText.focus()">clear</span>

When using an overlay/dialog, you need to use cdkFocusInitial within cdkTrapFocus and cdkTrapFocusAutoCapture.
CDK Regions:
If you're using cdkFocusInitial together with the CdkTrapFocus directive, nothing will happen unless you've enabled the cdkTrapFocusAutoCapture option as well. This is due to CdkTrapFocus not capturing focus on initialization by default.
In the overlay/dialog component:
<div cdkTrapFocus cdkTrapFocusAutoCapture>
<input cdkFocusInitial>
</div>

#john-white The reason the magic works with a zero setTimeout is because
this.searchElement.nativeElement.focus();
is sent to the end of the browser callStack and therefore executed last/later, its not a very nice way of getting it to work and it probably means there is other logic in the code that could be improved on.

Easier way is also to do this.
let elementReference = document.querySelector('<your css, #id selector>');
if (elementReference instanceof HTMLElement) {
elementReference.focus();
}

nativeElement select wait for binding data

Let's say that I have a child component called inputComponent that has a single input element as follow
#Component({ template: `<input #count [(ngModel)]="item.count" />`})
export class inputComponent implements OnInit {
#Input item;
#ViewChild("count") count : ElementRef ;
focus(){
this.count.nativeElement.focus();
this.count.nativeElement.select();
}
}
and I'm including it in a parent container as follow
<app-input-component [item]="item" ></app-input-component>
What I'm trying to achieve is to select the text input on a certain event.
for example
#ViewChild("input") count : inputComponent ;
foo(){
this.item = item ;
this.count.focus();
}
The problem is when I call focus change right after changing the binding data (item) it doesn't select anything hover if I called focus() after a short timeout it works perfectly .
I know it's not the proper way to use setTimeOut to solve it.
Stackblitz url
https://stackblitz.com/edit/angular-svgmtg

Apparently, ngModel updates the view's value asynchronously when the model is changed. I.e. the <input> value is not changed until the next change detection cycle!
From the ngModel source code:
/**
* `ngModel` forces an additional change detection run when its inputs change:
* E.g.:
* ```
* <div>{{myModel.valid}}</div>
* <input [(ngModel)]="myValue" #myModel="ngModel">
* ```
* I.e. `ngModel` can export itself on the element and then be used in the template.
* Normally, this would result in expressions before the `input` that use the exported directive
* to have and old value as they have been
* dirty checked before. As this is a very common case for `ngModel`, we added this second change
* detection run.
*
* Notes:
* - this is just one extra run no matter how many `ngModel` have been changed.
* - this is a general problem when using `exportAs` for directives!
*/
const resolvedPromise = Promise.resolve(null);
Then when the model is updated, the view is updated asynchronously:
private _updateValue(value: any): void {
resolvedPromise.then(
() => { this.control.setValue(value, {emitViewToModelChange: false}); });
}
So the setTimeout ensured that the input was selected after its view was updated.
If you want to avoid this asynchronous behavior, you can use FormControl instead of ngModel (Demo StackBlitz):
import { Component, Input, ViewChild, ElementRef } from '#angular/core';
import { FormControl } from '#angular/forms';
#Component({
selector: 'hello',
template: `<input #input [formControl]="count" />`,
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
private _item;
#Input() set item(value) {
this._item = value;
this.count.setValue(value.count);
this.focus();
}
get item() {
return this._item;
}
#ViewChild('input') input: ElementRef;
count = new FormControl();
focus() {
this.input.nativeElement.focus();
this.input.nativeElement.select();
}
}
With this approach, you don't need to call focus() explicitly from the parent component; the child component will call its own focus method whenever the input changes.

As I understood, you trying to get an element before it has been rendered. That is impossible.
I advice you to read about Lifecycle hooks in Angular. https://angular.io/guide/lifecycle-hooks
You can solve this problem, calling your foo() function in lifecycle hook - ngAfterViewInit.
ngAfterViewInit() {
this.foo();
}

Angular 2/Typescript Delete Object On Button Click

I have an Angular 2 app using Typescript but i am new to this, what i have is a table with a 'Delete' button,
I can pass the object data to my confirmation modal but when i 'Confirm' it, its still in my table.
delete-modal.component
import { Component, OnInit, Inject, Input } from '#angular/core';
import { TestService } from '../../ABC/TestService/TestService.service';
import { MdDialog, MdDialogRef, MD_DIALOG_DATA } from '#angular/material';
import { testModal } from 'models/test';
#Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.css']
})
export class testDeleteModalComponent implements OnInit {
#Input('test') test: testModal;
constructor(private TestService: TestService, private accountService: AccountService,
#Inject(MD_DIALOG_DATA) private dialogData: any) { }
ngOnInit() {
console.log('test', this.dialogData.beneficiary);
this.test = this.dialogData.test;
}
deleteTest() {
if (this.dialogData.test.identifier) {
// this.dialogData.beneficiary.splice(this.dialogData.beneficiary.indexOf(this.beneficiaryAnt), 1);
// this.dialogData.beneficiary.splice(this.beneficiary);
// delete this.beneficiary;
this.dialogData.test.splice(this.dialogData.test.indexOf(this.dialogData.test), 1);
} else {
this.dialogData.test.operation = 'X';
}
}
}
HTML
<button md-icon-button (click)="deleteTest()" name="deleteTestDetails">
<md-icon>delete forever</md-icon>
</button>
All other HTML is in a main component and the 'Delete' button is used as shown below
<app-test-main-page-delete-button [test]="test"></app-test-main-page-delete-button>
The 'deleteTest' method is called when the user click the confirm button.
I have also included above some ways i have tried in the IF but they always come back
... is not a function

It is good that you asked this question, my projects of three peoples also struggling with this. we have found is two ways. what i will show is two ways of doing typescriptdelete.
solution a.
because it is object, it will need identifier. First is
var objectdelete = {
identifier: 'Mydelte',
value: '168%'
}
Next what we need is now service. some people call them directives but from my experience they are the same thing. We have alert so user knows if they did not set identifier that they must go back. I do not see service on your side, i see array being deleted. if you combine the array and the service, this will then be working across whole website.
export class DeleteService
delete(objectToDelete: string) {
if (!objectToDelete.identifier) {
alert('No identifer');
}else {
// Delete from your array here.
}
}
Solution 2.
If the above does not meed your needs, our tema also experimented with interfaces in typescript. You can see them here https://www.typescriptlang.org/docs/handbook/interfaces.html
so it becomes
export class myDeleteService {
deleter: IDeleter
}
export interface IDeleter {
delete: this.delete.delete(deletE);
deleteArray: this.array =[];
}
then simply in your html it will be
<button (click)='delete(dieleter)'>Delete me!</button>
These are all common typescript behaviours for angular2/4/5 so we are hoping to become more used to them when we have hads more time to use them!

The easiest way to delete data object on button click and refresh instantly when it's done :
Your parent html has to call children like this :
<app-component [inputData]="dataTable" (inputDataChange)="resetData()"/>
Add dataTable as class variable and implement the output function :
resetData() { this.dataTable=[] }
Then in children html leave your code (you can use this changes)
<button class="fa fa-delete" (click)="deleteTest()" name="deleteTestDetails">Delete</button>
Finaly in your children ts file set your data object for each change, and implement your input function
myDataTable: any = [];
#Input set inputData(data: DataTable) {
if(data) {
this.myDataTable = data;
}}
#Output() inputDataChange: EventEmitter<any> = new EventEmitter();
deleteTest() {
this.inputDataChange.emit(true);
}
What does this code do ?
It will emit and event to the parent when the delete button is clicked, then your parent will delete the dataTable, and finally, your children input will refresh it, as setter will catch the changes and refresh the variable.
If you want to apply those rules to table changes, then simply emit your dataTable and reassign it instead of reset it.

I am in a project with and our team have struggled on this for a whiles.
First thing I will say is this, Angular has not made this an easy task, so we will attempt to ignore the framework and write pure Java instead to make our lives easyer on ourselves.
SO looking at your button, I can see that you have started on the right track.
If the button is calling your component like the following
Html/Java
<button ng-click="delete()">Click me<button>
Component.ts
function delete = deleteMethod(testIdentifier) {
var abc = this.beneficiary.beneficiaryIdentifier.test.splice(this.beneficiary.beneficiaryIdentifier.test.indexOf(testIdentifier));
component2.deleteFunction();
}
Component2.ts
Then we can pass our identifiers into our parent or child components and remove the beneficiary like so:
deleteMethod(deetle) {
this.beneficiary.removeAtIndex(testIdentifier.splice(1), 1);
}
Nice and easy looking back, but it took our team of threes a long whiles to figure that ones out.

Modifying the model value of Angular 4 input box

I am trying to modify the input box model of Angular 4 such that if the user types in, say 23, in the box, the box should display 23%.
I have tried appending the % to the model value after accessing it in events like (input) or (change). This however changes the model entirely. What I want is that the Angular model variable should still contain 23 but should display 23%.
Is there any way I can build a directive around this. Any suggestions or link ?

It's a little hacky way, but you can do this:
<input #input1 value="{{title}}%" (keydown)=setModel(input1.value)>
And in component:
title = '23';
setModel(val) {
this.title = val.split('%').join('');
console.log(this.title)
};
value="{{title}}%" will take title value and will add % at the end. And you can set new value using setModel method, but before setting, you need to remove all % characters, like this: this.title = val.split('%').join('');.

Since you're trying to change the way how a component displays the value, you should use a directive instead of changing the actual value in the model. In other words, you need an input mask here. You can use one of the existing packages (e.g. https://github.com/text-mask/text-mask) or write your own directive.

You can create a component with 2 values: one is the bound value, and the other is the displayed value. The component would look a little like this:
#Component({
selector: 'hello-world',
template: `
<input type="text" [(ngModel)]="display" (keyup)="updateInput($event)" placeholder="Enter a name here">
<hr>
<h1>Input: {{input}}</h1>
`
})
export class HelloWorld {
#Input() input = 0;
#Output() inputChange = new EventEmitter();
display;
ngOnInit() {
this.display = `${this.input}%`
}
updateInput(evt) {
this.input = this.display.replace(/[^0-9.]/g, "");
this.display = `${this.input}%`;
this.inputChange.emit(this.input);
}
}
And you can bind to the component like so:
<hello-world [(input)]="myVar"></hello-world>

Add directive from directive

I have a directive deciding if an input must be required, masked, etc... I ran into a situation that I need to add a new directive to it: basically this new directive adds the mask feature to the input.
<input type="text" formInput [rules]="rules" [(ngModel)]="value" />
This is the formInput directive:
export class DefaultFormInputDirective {
#Input() private rules;
private el: ElementRef;
constructor(el: ElementRef) {
this.el = el;
}
ngOnInit() {
this.defineRules();
}
defineRules() {
if(this.rules == undefined) {
return;
}
if(this.rules.indexOf('required') != -1) {
this.el.nativeElement.required = true;
}
if(this.rules.indexOf('numeric') != -1) {
// Here is where I need to add currencyMask directive
}
}
}
This is the package I am using: https://www.npmjs.com/package/ng2-currency-mask

Adding directives dynamically is not supported. You can only add/remove components dynamically.

In most cases I would recommend to add attributes directly to the input as it seem much more approrpriate approach to me.
Anyway to achieve this you can create some kind of input abstraction component that will accept such inputs like type, will work with ngModel (you can find more about this here or here for instance) and will contain whatever input you need with any attributes and directives.
So it may look like this in the end:
<custom-input type="text" formInput [rules]="rules" [(ngModel)]="value"></custom-input>
Then you can hide your logic on what actual input has to be like in this component: assign needed attributes, directives and many other things you'll need.