Angular 2 create element on click

Question

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

use a incerceptor like angular.io/guide/http#logging. and a service. The service can have to method "startRequest" and "endRequest". This services dispatch a observable. Then you can subscribe to this observable anywhere in your application to know when start and when end a request. In de subscription use a variable to show or not your loader or div — Eliseo
– Eliseo, Commented Dec 5, 2017 at 22:21

Jean-Marc Roy · Accepted Answer · 2017-12-06 15:55:57Z

1

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
  }
};

edited Dec 6, 2017 at 15:55

answered Dec 6, 2017 at 1:18

Jean-Marc Roy

1,7911 gold badge13 silver badges12 bronze badges

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

2 Comments

User Over a year ago

yes, that is quite good solution but there is one little problem. on my page is that element used repeatedly, so at one page are 100 of these elements. so what’s the best solution? to make an array from loaded and loading?

Jean-Marc Roy Over a year ago

You could just append loading and loaded property client side to your data array and use *ngIf in your *ngFor loop. I edited the example in the answer to show you the principle.

Collectives™ on Stack Overflow

Angular 2 create element on click

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related