如果选中复选框，如何显示div元素？

Question

I am trying to display a div element if a checkbox is checked using ng-show. If the user does not have a telephone number, they check the checkbox and an input element should appear where they can enter their mailing address. However, switching between checked and unchecked values is having no effect at the moment.

I have done two way binding on the element.

-- My component.html file --

<input type="checkbox" name="myCheckbox" [(ngModel)]="person.myCheckbox">
I don't have a telephone
<div ng-show="person.myCheckbox">
   Show when checked (telephone input)
</div>

-- Person.ts file --

export class Person {

        constructor(
            public myCheckbox: boolean
        ) {  }
    }

Answer 1

Welcome to the community.

ng-show is a directive of the angularJS framework.

In Angular (note the capital 'A') we use the ngIf directive like this:

<div *ngIf="person.myCheckbox">

Answer 2

With angular, you should use ngIF

<div *ngIf="person.myCheckbox">

But you can do it just with CSS.

 [name="myCheckbox"] + div { display: none; } [name="myCheckbox"]:checked + div { display: block; } 

 <input type="checkbox" name="myCheckbox" [(ngModel)]="person.myCheckbox"> I don't have a telephone <div> Show when checked (telephone input) </div> 

Answer 3

You simply have to use the *ngIf directive.

-- Your component.html file --

<input type="checkbox" name="myCheckbox" [(ngModel)]="person.myCheckbox">
I don't have a telephone
<div *ngIf="person.myCheckbox">
   Show when checked (telephone input)
</div>

-- Person.ts file --

export class Person {
    constructor(
        public myCheckbox: boolean
    ) {  }
}