Angulaire: afficher / masquer le composant en fonction de l'état de l'autre composant

user149691

J'ai un checkboxet textboxsur une page Web. Checkboxet Textboxsont deux composants indépendants.

La zone de texte doit être masquée jusqu'à ce que la case à cocher soit activée. Si la case à cocher est désactivée - la zone de texte doit être masquée

Est-ce possible via des directives? Quelque chose comme:

<checkbox></checkbox>
<textbox *ngIf="checkbox.value"></textbox>

Merci d'avance!

habib chabbi

@ user149691 vous venez de manquer d'identifier l'élément auquel vous faites référence et d'utiliser sa propriété.

l'un des deux codes suivants devrait fonctionner pour vous:

<checkbox ngModel #myCheckbox></checkbox>
<textbox *ngIf="myCheckbox.value"></textbox>



<checkbox ngModel id="myCheckbox"></checkbox>
<textbox *ngIf="myCheckbox.value"></textbox>

Ce lien peut vous être utile: https://ultimatecourses.com/blog/element-refs-in-angular-templates

Articles connexes

Afficher et masquer le composant en fonction de l'objet actuel

marwane J'ai un composant parent Editoravec un tableau d'objets mappés à un autre composant Sceneen utilisant la méthode map : function Editor() { const [URL, setURL] = useState(); const [scenes, setScenes] = useState([]); const addScene = () => { con

Afficher / Masquer un composant dans React en utilisant l'état

Un mec J'essaye de cacher / montrer un composant tout en vérifiant une valeur d'état: import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import Button from '@material-ui/core/Button' class App extends Component {