How to Remove or Add Html Element Using Angular5+

Question

Hi i am a student developer. I have a question. On Internet, there are so many resources about it but many of them are about AngularJS. With this case, I did not find a clear solution to my project. When I make delete or add data to my Api, How can I add or delete html element without reload web page? Do you have an advice to remove or add in tweetDisplay element ?

My Html page;

<form #tweetAddForm="ngForm" (ngSubmit)="addTweet(tweetAddForm)">
    <div class="tweetPart">
      <div><img src="../../../assets/img/r1.jpg" class="profileImg rounded-circle" alt="Profile Img" /></div>
      <div class="tweetItem">
        <mat-form-field class="tweetArea">
          <textarea id="tweetContent" #tweetForSend="ngModel" [(ngModel)]="tweetModel.tweetContent" matInput
            placeholder="Neler Oluyor?" required name="tweetContent"></textarea>
        </mat-form-field>
      </div>
    </div>
    <div class="iconsAndBtn"><button mat-button class="btnTweetSend" [disabled]="tweetAddForm.invalid"
        type="submit">Tweetle</button>
</div>
</form>
 <div *ngFor="let tweet of tweets" class="tweetDisplay  ml-2">
    <div class="tweetterInfo">
      <div class="ml-2"><b>Emre Sert</b> @emreeseert</div>
      <div class="ml-2">{{tweet.tweetContent}}</div>
        <i class="far fa-edit ml-4"></i>
        <i style="cursor: pointer;" (click)="removeSelectedTweet(tweet)" class="fas fa-trash-alt ml-5"</i>
    </div>
  </div>

Component.ts;

import { Component, OnInit } from '@angular/core';
import { Tweet } from './tweet' 
import { TweetService } from './tweet.service';
import { NgForm } from '@angular/forms';
declare let  alertify:any; 
@Component({
  selector: 'app-tweet',
  templateUrl: './tweet.component.html',
  styleUrls: ['./tweet.component.css'],
  providers:[TweetService]

})
export class TweetComponent implements OnInit {

  tweets: Tweet[];
  tweetModel : Tweet = new Tweet(); 

  constructor(private tweetService :TweetService ) {}  

  ngOnInit() {
   this.tweetService.getTweets().subscribe(data=>{
     this.tweets = data
   })
  } 

  addTweet(form:NgForm){
  this.tweetService.addTweet(this.tweetModel).subscribe(data=> alertify.error('added.'));
  }
  removeSelectedTweet(tweet:Tweet){
    if(confirm("Are you sure ?")){
      this.tweetService.removeSelectedTweet(tweet.tweetId).subscribe(data=> alertify.error('deleted'));
    }
  } 
}

I would suggest that you call getTweets everytime you add or remove something so that your tweets array always reflect the databas — Layera
– Layera, Commented Jan 9, 2020 at 13:17

Soukyone · Accepted Answer · 2020-01-09 13:17:56Z

2

You just need to remove the tweet Object from the array:

removeSelectedTweet(tweet:Tweet){
    if(confirm("Are you sure ?")){
       this.tweetService.removeSelectedTweet(tweet.tweetId).subscribe(data=> {
         alertify.error('deleted'));
         this.tweets = this.tweets.filter(value => value.tweetId != tweet.tweetId)
       });
    }
 }

The ngFor loop, will update automatically

answered Jan 9, 2020 at 13:17

Soukyone

5772 silver badges13 bronze badges

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

2 Comments

Emre Sert Over a year ago

what about add ? is it same ?

Soukyone Over a year ago

Yeah, it's same, just add an object, into the array, angular will reload the loop

Andris · Accepted Answer · 2020-01-09 13:42:37Z

1

You can on success cases return saved object. And in this scenario code is like this:

addTweet(){
    this.tweetService.addTweet(this.tweetModel).subscribe(savedTweet=> {
        this.tweets.push(savedTweet);
        alertify.error('added.');
    });
}

In remove case everything is the same, except you are not pushing into array, but removing from it by specific rule (tweet id etc.).

edited Jan 9, 2020 at 13:42

answered Jan 9, 2020 at 13:34

Andris

4,2132 gold badges28 silver badges28 bronze badges

1 Comment

Emre Sert Over a year ago

Thanks. It was true but one user answered my question before you.

Roberto Zvjerković · Accepted Answer · 2020-01-09 13:18:52Z

0

Just get tweets again after deleting/adding them.

  addTweet(form:NgForm){
    this.tweetService.addTweet(this.tweetModel).subscribe(data=> alertify.error('added.');
      this.tweetService.getTweets().subscribe(data=>{
        this.tweets = data;
     }));
  }

answered Jan 9, 2020 at 13:18

Roberto Zvjerković

10.2k4 gold badges31 silver badges49 bronze badges

2 Comments

Prashant Pimpale Over a year ago

why ? if the response is success then it can be removed/added from/in list

Andris Over a year ago

Overkill to reask full list, if there was only 1 tweet added. Also time consuming.

Collectives™ on Stack Overflow

How to Remove or Add Html Element Using Angular5+

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related