Develop Reference

Is there an Angular way of doing: document.getElementById(id).style.display = "none";

I have a div with the id of 1. I'm trying to set the display to none dynamically. Is there an Angular way of doing this. Currently, I'm using vanilla javascript. I was asking about doing this dynamically because there will be over 60 divs that will be created from an array.
In my html
<div *ngFor="let item of items; i = index;">
<div id={{i}} (click)=hideDiv()></div>
</div>
In my method
hideDiv() {
return document.getElementById('1').style.display = "none";
}
That works but I'm looking for the Angular way of doing the above.
It was suggested that I use #ViewChild. Here's what I've changed. I can't use a Template Reference Variable as the html divs are created dynamically. Unless someone can let me know how to create the template variables dynamically. Although I don't think it's possible to create template variables with a loop.
#ViewChild('imgId', { static: true }) elementRef: ElementRef<HTMLDivElement>;
imgId: string;
Then in the method I have:
this.imgId = event.path[0].attributes[1].value;
this.elementRef.nativeElement.style.display = "none";
The event.path[0].attributes[1].value gets me the id of the image. The imgId shows when I console log it. It's still not changing the display on the div to none. Also I'm getting the error:
Cannot read properties of undefined (reading 'nativeElement')

Yes, you can use the ViewChild query in Angular to do this. In your component, define a query like this:
#ViewChild('#1') elementRef: ElementRef<HTMLDivElement>;
Implement the AfterViewInit interface in your component, and inside it, use this:
this.elementRef.nativeElement.style.display = "none";

You can simply use ngIf for this
Component
shouldDisplay: boolean = true;
hide(): void {
this.shouldDisplay = false;
}
show(): void {
this.shouldDisplay = true;
}
Html
<button (click)="hide()">Hide</button>
<button (click)="show()">Show</button>
<div *ngIf="shouldDisplay">this is the content</div>
Here is the working example

This is the Angular way:
template
<div *ngIf="showMe"></div>
or
<div [hidden]="!showMe"></div>
TypeScript:
showMe: boolean;
hideDiv() {
this.showMe = false;
}

For dynamic items where your don't know how many you will get the best approach would be to add a directive that would store and adjust that for you:
#Directive({ selector: '[hide-me]' })
export class HideDirective {
#Input() id!: string;
#HostBinding('style.display')
shouldShow: string = '';
}
then in your component just address them by ID:
#Component({
selector: 'my-app',
styleUrls: ['./app.component.css'],
template: `
<div *ngFor="let item of items; let index = index;">
<div hide-me id="{{index}}" (click)="hideDiv(index)">Some value</div>
</div>
`,
})
export class AppComponent {
#ViewChildren(HideDirective) hideDirectives!: QueryList<HideDirective>;
items = [null, null, null];
hideDiv(id: number) {
this.hideDirectives.find((p) => p.id === id.toString()).shouldShow = 'none';
}
}
Stackblitz: https://stackblitz.com/edit/angular-ivy-pnrdhv?file=src/app/app.component.ts
An angular official example: https://stackblitz.com/edit/angular-ivy-pnrdhv?file=src/app/app.component.ts

How about passing the div reference to the hideDiv method directly in the Dom using a template variable like this.
<div *ngFor="let item of items; i = index;">
<div #divElement (click)=hideDiv(divElement)></div>
And in your hide div method you will have access to the element directly
hideDiv(div) { div.style.display = "none";}
Here is a Stackblitz example
https://stackblitz.com/edit/angular-ivy-w1s3jl
There are many ways to do this, but in my opinion this is a simple solution the achieves your goal with less code.
PS:
It is always recommended to use the angular Renderer2 to manipulate Dom elements. This service has the method setStyle which you can use for your code.

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();
}

text-overflow property custom style

Application is built on angular. In a component, there is a div inside which there is a text. <div>abcdefghijklmnop<div>
Based on the screen size, it should show completely or it should clipped. For this I have found that there is a property 'text-overflow', which clipped the text like abcde.... But the requirement is we have to clip the text in other way,
<first 3 character>...<last 3 character>
So it should look like abc...nop. How can we achieve this? Browser is chrome.

You could use a attribute directive like bellow to do this. For more details please refer Angular DOC
Please Note: You could improve this directive as you wish. This directive is only giving you the basis to implement that feature.
Directive:
import { Directive, ElementRef, OnInit } from '#angular/core';
#Directive({
selector: '[appClip]'
})
export class ClipDirective implements OnInit {
constructor(private el: ElementRef) { }
ngOnInit(): void {
let text: string = this.el.nativeElement.innerHTML;
if(text.length > 6) {
const first3 = text.slice(0, 3);
const last3 = text.slice(text.length - 3)
this.el.nativeElement.innerHTML = `${first3}...${last3}`;
}
}
}
HTML:
<div appClip="">abcdefghijklmnop</div>
Working DEMO

Clone/Copy a Method in Javascript?

How does one clone or copy a method such that no reference to the original method is maintained?
I am trying to copy a click function on an element using the DOM and assign it to another element so I can remove the first element from the DOM without losing the function reference on the other element. I am doing this in a directive.
element.click = parent.click //need a better way to copy
element.click() //works
remove(parent)
element.click() //doesn't work
The reason why I am doing this is because I am removing the parent-wrapper tag, which has a (click) method assigned to it, so that just its inner button template remains. However, because I am removing the wrapper tag, the (click) on the parent tag is not being passed to the template button tag.
For instance, I have an app-button component with a button in its template.
Currently this is rendered:
<app-button (click) = function(1, 2)>
<button>
</button>
</app-button>
I want the parent tag removed, which I am doing via a DOM manipulation, but want to maintain the (click) function, like:
<button (click) = function(1, 2)>
</button>

I'm not quite sure I understand why you are trying to do what you are doing(or what it is exactly), but from my understanding, you could store a reference to the host element '' in the component class, then you can assign a listener to the <button> element in your template that triggers a click event on that reference:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule, Component, ViewChild, ElementRef, Renderer2, OnInit} from '#angular/core';
#Component({
selector: 'app-root',
template: `
<app-button (click)="foo()"></app-button>
`
})
export class AppComponent {
foo() {
console.log('bar');
}// end function
}// end class
#Component({
selector: 'app-button',
template: `<button #button (click)="onClick()">Click me</button>`
})
export class AppButtonComponent implements OnInit {
#ViewChild('button')
private button:ElementRef;
constructor(
private element:ElementRef,
private renderer:Renderer2
) {}
ngOnInit() {
let parent = this.element.nativeElement.parentElement,
element = this.element.nativeElement,
button = this.button.nativeElement;
this.renderer.insertBefore(parent, button, element );
this.renderer.removeChild(parent, element);
}// end function
onClick() {
let element = this.element.nativeElement;
element.click();
}// end function
}// end class

#HostBinding disabling class from child component Angular 4

I have an angular app which has user login and logout. I am showing up a welcome page as the home page before a user logs in. I want to enable a background image only on the welcome page. Once the user logs in, the background image must disappear. When the user logs out, he will be redirected to welcome page which must show up the background image again.
I have tried using #HostBinding in the app.component.ts by renaming the selector to 'body'.
app.component.ts
import {Component, HostBinding, Input} from '#angular/core';
import {InputMask} from "primeng/primeng";
#Component({
selector: 'body',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
path = '../assets/img/AvayaHome.jpg';
title = 'app';
toggleClass = true;
#HostBinding('class.bodyClass') isWelcomePage = this.toggleClass;
}
Here is my CSS.
app.component.css
.bodyClass {
background-image: url("../assets/img/AvayaHome.jpg");
}
Here is my index.html
<!doctype html>
<html lang="en">
<head>
<title> Something </title>
</head>
<body class="bodyClass">
<app-welcome-page></app-welcome-page>
</body>
</html>
I am enabling the css style for bodyClass by assigning toggleClass as true. Once the user logs in, I am changing the value of toggleClass (which is in the app.component.ts) from the child component.
Here is my login.component.ts
onLogin() {
console.log('onLogin() invoked:', this._email, ':' , this.password);
if (this._email == null || this.password == null) {
this.errorMessage = 'All fields are required';
return;
}
this.errorMessage = null;
this.loginservice.authenticate(this._email, this.password);
this.appComponent.toggleClass = true;
this.router.navigate(['/dashboard']);
}
The value of the toggleClass changes when the user logs in to FALSE. But I am still seeing the background image. Not sure what I am doing wrong. Any help will be appreciated.

As an example, let's take a look at this code:
var toggleClass = false;
var isWelcomePage = toggleClass;
console.log(isWelcomePage); // prints true
Cool, all works as expected.
Ten seconds later....
Some user logins:
toggleClass = true;
console.log(isWelcomePage); // prints false
Why it has not changed???
If you open any documentation or any book about javascript you can read one main rule:
Primitives are always immutable.
When we assign toggleClass variable to isWelcomePage variable using =, we copy the value to the new variable because primitives are copied by value.
Solution 1:
Change isWelcomePage property directly
onLogin() {
...
this.appComponent.isWelcomePage = true;
...
}
Solution 2
Define getter
#HostBinding('class.bodyClass')
get isWelcomePage() {
return this.toggleClass;
}

Make a function with if and else;
if (user is login) {
document.body.classList.add('bodyClass');
} else {
document.body.classList.remove('bodyClass');
}
Than call that function when ever you need, logIn logOut etc

If you want to dynamically display and hide a background you should use a conditional class with ngClass
You can read more about it here NgClass
In your case it would be
<div [ngClass]="{'bodyClass': isWelcomePage}">
...
</div>
Then bodyClass css class will only apply IF isWelcomePage is true, if it's false it won't apply and the image won't show.
Edit:
As requested, a working example: Plunkr

Hostbinding only binds stuff to host tag, in your case tag.
So if you want to manipulate the body tag, you have to do it using plan javascript from your component or also create a component in the body.
#Component({
selector: 'body',
template: `<child></child>`
})
export class AppComponent {
#HostBinding('class') public cssClass = 'class1';
}