Mise au point angulaire sur l'entrée en cliquant sur un élément

Vous pouvez le faire avec du balisage pur. Vous devez ajouter un identifiant à l'entrée et un élément for à l'étiquette

  <input class="input" type="text" id="firstName" [(ngModel)]="firstName">
  <label class="label" for="firstName" [ngClass]="{'go-top': firstName}">First Name</label>

Ceci n'est qu'une partie de la spécification html - les étiquettes peuvent être associées aux entrées - la fonctionnalité prête à l'emploi ici est qu'en cliquant sur une étiquette, il met le focus sur son entrée associée. Les attributs id et for doivent correspondre pour que cela fonctionne.

Pour la deuxième partie de votre question et pour réutiliser vos classes css - ajoutez des variables correspondantes à votre composant. Utilisez ngClass pour ajouter la classe .go-top lorsque la variable a une valeur

Dans le composant -

firstName: string;

Puis dans le html -

<input class="input" type="text" id="firstName">
<label class="label" for="firstName" >First Name</label>

1. Dans le html, ajoutez une référence à votre texte d'entrée - #firstNameField et ajoutez une méthode pour cliquer sur l'événement de l'étiquette - (click) = "focusOnFirstName ()"

      @ViewChild("firstNameField") firstNameField;

      focusOnFirstName(){
        this.firstNameField.nativeElement.focus();
      }

2. Dans votre composant, déclarez ViewChild et implémentez une méthode pour cliquer sur le champ d'étiquette.

    <input #firstNameField class="input" type="text">
    <label class="label" (click)="focusOnFirstName()">First Name</label>

Je regarde cela dans l'optique de créer une solution plus "angulaire" pour votre demande de style conditionnel. À cette fin, vous devez vous concentrer sur le roulement de votre combinaison entrée / étiquette dans un composant d'entrée personnalisé. Une fois que vous avez créé un composant avec vos éléments d'origine comme modèle de départ, vous pouvez appliquer plus efficacement ce qui suit:

La stratégie de base consiste à appliquer conditionnellement vos styles en utilisant la liaison de propriété [class] ou les directives [NgStyle] d'Angular.

1. Effectuez une requête ViewChild sur le modèle de l'élément d'entrée
   2. Ajouter un écouteur d'événement sur l'élément d'entrée dans le modèle
   3. Chaque fois qu'un événement keyup est détecté, il déclenchera la vérification de la valeur de votre champ et mettra à jour une propriété de classe indiquant si le champ est vide
   4. La détection des modifications se déclenchera et les liaisons [NgClass] ou [class] déclencheront des mises à jour de la classe de l'élément

//component.html with [style] property binding
// in this instance, empty is a reference to the property in the .ts file

<label for="my-input" #label> {{ labelName }}
<input type="text" id="my-input" [class.empty]="empty" #input>

//component.html with [ngClass] directive

<label for="my-input" #label> {{ labelName }}
<input type="text" id="my-input" [ngClass]="styles()" (keyup) = "isEmpty()" #input>

//component.ts

import { Component, Input, ViewChild, ElementRef } from '@angular/core'

@Component({
  selector: 'app-input',
  styleUrls: ['./input.component.css'],
  templateUrl: './input.component.html'
})

export class InputComponent{
  @Input() labelName: string = "Your Label Here"
  @ViewChild("input") myInput:ElementRef<any> //ViewChild query

  empty: Boolean = true; // this property will track whether input value is truthy

  isEmpty(){ // attached to keyup event on input element in your template file

   if (this.myInput.nativeElement.value){
      this.empty = false;
    } else{
      this.empty = true;
    }
  }

  styles(){ // attached to the [ngClass] directive binding on input element in template file
    return {
      'empty': this.empty ? true: false,
      'not-empty': this.empty ? false: true
    }
  } 

}