CODEWITHSUNDEEP
angular
User
User

Reputation: 314

Angular 2 create element on click

I would like to ask how to implement this logic in Angular 2: I have posts like this:

<div class="postDetail clearfix">
  <div class="title float-left"><a href="#">Lorem ipsum dolor sit</a></div>
  <div class="createdAt float-right">before 10 hours</div>
  <br>
  <div class="desc float-left">Lorem ipsum dolor sit amet, <b>consectetur</b> adipisicing.</div>
  <div class="createdAt float-right">Preview >></div>
  <br>
</div>

When I click "Preview >>" I would like to display after last br tag this code:

<div class="loading">
    <mat-spinner [diameter]="40" [strokeWidth]="5"></mat-spinner>
</div>

When async server call will finish and I'll have data in redux, I want to display following code instead of loading before:

<div class="preview" style="display: none;">
    <img src="...">
    <span class="name">Name Surname</span>
    <p>Lorem ipsum dolor ...</p>
    <div class="foot">
      <b>Responses:</b> 221 | <a href="#">Show all</a>
    </div>
</div>

I have no idea what logic should I use.

How should it work? 1. Server call onInit loads title and metadata 2. After clicking Preview button, will be shown loading spinner and made server call for data about specific post (there is so many data to load on init call) 3. When server call successfull, replace loading with actual data provided above

Upvotes: 0

Views: 110

Answers (1)

Jean-Marc Roy
Jean-Marc Roy

Reputation: 1791

You could use *ngIf on your different template and display the wanted template depending on your component state.

Example:

EDIT: Example with *ngFor

Template

<div *ngFor="let user of users">
  <div class="postDetail clearfix" *ngIf=" ! user.loading && ! user.loaded">
    <div class="title float-left"><a href="#">Lorem ipsum dolor sit</a></div>
    <div class="createdAt float-right">before 10 hours</div>
    <br>
    <div class="desc float-left">Lorem ipsum dolor sit amet, <b>consectetur</b> adipisicing.</div>
    <div class="createdAt float-right" (click)="loadPreviewData(user)">Preview >></div>
    <br>
  </div>

  <div class="loading" *ngIf="user.loading">
    <mat-spinner [diameter]="40" [strokeWidth]="5"></mat-spinner>
  </div>

  <div class="preview" style="display: none;" *ngIf="user.loaded">
    <img src="...">
    <span class="name">Name Surname</span>
    <p>Lorem ipsum dolor ...</p>
    <div class="foot">
      <b>Responses:</b> 221 | <a href="#">Show all</a>
    </div>
  </div>
</div>

Component

import { Component } from '@angular/core';

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  public users: Array<any>;

  constructor() {};

  ngOnInit() {
  // Get your initial value
     this.users.forEach(user => {
      user.loaded = false;
      user.loading = false;
   })
  }
  loadPreviewData(user) {
    user.loading = true;
    this.loadRemoteData().subscribe(data => {
      user.loading = false;
      user.loaded = true;
      user.data = data;
      // Display new data
    })
  }

  loadRemoteData() {
    // Method requesting data
  }
};

Upvotes: 1

Related Questions