CODEWITHSUNDEEP
angularangular5angular-components
Jefferson Costa
Jefferson Costa

Reputation: 117

How do i restrict the element scopes on Angular 5?

I have a timeline page and i want to when the edit is clicked, it transforms the title in a input tag like this. But the problem is, when i click edit in some post it's affecting all of the posts in the timeline. Is there a way to not share the same variables in all elements?

the template 

<div class="card border-dark mb-3 mx-auto" style="max-width: 25rem;" *ngFor="let post of postList">

<div class="card-body text-dark">

        <i class="fas fa-trash  float-right" style="color:rgb(163, 163, 163)" (click)="deletePost(post)" ></i>
        <i class="fas fa-edit" style="margin-bottom: 10px;"  (click)='editarPost(post)'></i>

    <h5 class="card-title"  *ngIf='editarPostBool==false' >{{post.titulo | uppercase }}</h5>
    <input type="text" *ngIf='editarPostBool' [(ngModel)]="post.titulo" class="input-titulo" >

    <p class="card-text">{{post.texto}}</p>

    <p class="card-text">
        <small class="text-muted">postado por {{post.nomePessoa}}</small> 
    </p>

    <div class="tristezas">
        <span>{{post.tristezas}}</span>
        <i class="fas fa-frown fa-2x tristeza-icon" (click)="maisTristeza(post)" [class.tristeza-ativa]="post.tristezaDada"></i>
    </div>
</div>

And the .ts

export class PostsItselfComponent implements OnInit {
@Output() tristezaClicada = new EventEmitter();
postList: Posts[]
editarPostBool:boolean = false

constructor(private postService: PostService) { }

ngOnInit() {
this.getPost()
}

maisTristeza(post: Posts) {
if (post.tristezaDada == true) {
  return
} else {

  console.log(post)
  this.postService.addTristeza(post)
    .subscribe((data) => { console.log(data) })
}
}

getPost() {
console.log("geeet")
this.postList = [];
this.postService.getPosts()
  .subscribe((data) => { this.postList = data }, (error) => console.log(error));
}

deletePost(post: Posts) {
this.postService.excluirPost(post)
  .subscribe((data) => { console.log(data); this.getPost() })
}

editarPost(post){
this.editarPostBool = true
console.log(this)
console.log('editar')
}
}

Upvotes: 1

Views: 28

Answers (1)

bugs
bugs

Reputation: 15323

You can keep track of each edit individually, and only modify the relevant one when the icon is clicked.

I've made a quick stackblitz example to show how that would work (I removed most of the stuff from your example as it wasn't relevant), you can easily extend it to your use case. Click the title of a post to switch to editing mode for that single post.

Upvotes: 1

Related Questions