Angular 4 condition nested in loop

Question

can you help me fix my code of ng4? I have array of user models, which every have property firstName, lastName, and age like that:

export class User {
    public firstName: string;
    public lastName: string;
    public age: number;

    constructor(fName: string, lName: string, age: number) {
        this.firstName = fName;
        this.lastName = lName;
        this.age = age;
    }
}

Here is my component.ts code:

export class UserItemComponent implements OnInit {
  users: User[];

  constructor() { 
    this.users = [
      new User("John", "", 16),
      new User("Jose", "", 45),
      new User("Xavier", "", 22)
    ]
  }

  ngOnInit() {
  }
}

When I tried it without condition in template, it was working. After I've added condition, I have this issues:

Unexpected closing tag "p". It may happen when the tag has already been closed by another tag.

Do you have idea what I did wrong? Here is code of html template:

<p *ngFor="let user of users">
  <div *ngIf="user.age > 20; then old else young"></div>
  <ng-template #old>Hello, my name is {{user.firstName}} and I'm too old - {{user.age}}.</ng-template>
  <ng-template #young>Hello, my name is {{user.firstName}} and I'm too years young - {{user.age}}.</ng-template>
</p>

Pankaj Parkar · Accepted Answer · 2017-07-29 13:40:28Z

2

p tag can contain only inline elements

Change div to span(inline element)

Why p tag can't contain div tag inside it?

Demo Plunker

edited Jul 29, 2017 at 13:40

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

answered Jul 29, 2017 at 13:37

taras-d

1,8371 gold badge16 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sajeetharan · Accepted Answer · 2017-07-29 13:38:20Z

1

Use div instead of p

<div *ngFor="let user of users">
  <div *ngIf="user.age > 20; then old else young"></div>
  <ng-template #old>Hello, my name is {{user.firstName}} and I'm too old - {{user.age}}.</ng-template>
  <ng-template #young>Hello, my name is {{user.firstName}} and I'm too years young - {{user.age}}.</ng-template>
</div >

answered Jul 29, 2017 at 13:38

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Comments

Kleber · Accepted Answer · 2017-07-29 13:57:34Z

1

Change <div> to <ng-template>:

<p *ngFor="let user of users">
    <ng-template *ngIf="user.age > 20; then old else young"></ng-template>
    <ng-template #young>Hello, my name is {{user.firstName}} and I'm too years young - {{user.age}}.</ng-template>
    <ng-template #old>Hello, my name is {{user.firstName}} and I'm too old - {{user.age}}.</ng-template>
</p>

The reason is that it's not recommended you put a <div> inside a <p>, so Angular throws an error. You can test it doing something like this:

<p><div>This will throw the same error in Angular</div></p>

edited Jul 29, 2017 at 13:57

answered Jul 29, 2017 at 13:41

Kleber

1,0751 gold badge17 silver badges26 bronze badges

Collectives™ on Stack Overflow

Angular 4 condition nested in loop

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related