Send a variable between Siblings components in Angular

mine
Share this

I continue on the Angular + Drupal project, this time I will solve a "simple" problem. And for that, I will use the same for the last time, our friend: Behaviour Subject. 


Check the project on github


Check the demo Angular site

 

Second part: Send a variable that I get from one component to another.

The problem: 

A have a bad css for an X icon, which has the responsibility to call the delete() function into the navigation component. This function will delete the element from Drupal. 

task.service.ts

/** DELETE: delete the task from the server */ 
 deleteTask (task: Task | number): Observable<Task> { 
  const id = typeof task === 'number' ? task : task.id; 
  const url = `${this.mainUrl}/node/${id}`;

  return this.http.delete<Task>(url, httpHaljson).pipe( 
  tap(_ => this.log(`deleted task id=${id}`)), 
  catchError(this.handleError<Task>('deleteHero')) 
  ); }

If I'm viewing a task, and decide to delete it, this will call the delete() function and delete the task, but I will stay in the view task page without moving. I need a simple redirect to the /home. And this redirect only will work if I'm on the current deleted page. 

If I am in task/2 and delete task/3, I should stay on the task/2. If I'm in task/2 and delete task/2 it has to send me to the /home. 

So, from the menu task, in the navigation component, I will call the delete() function, and this will destroy the task, but, after that, if the id from the deleted element is equal to the id of the current Id this will redirect me to the /home page. 

The solution: 

I will use a Behavior Subject, so, in a common file, between the navbar and the view task I will set a variable who will be affected by one or another. 

In our services.ts, after importing behavior subject, let’s declare a Behavior Subject type number, and give it to an observable. Also, a simple and beautiful function that receives a data and update our variable. 

import { BehaviorSubject } from 'rxjs/BehaviorSubject';
private noId = new BehaviorSubject<number>(0); 
  defaultId = this.noId.asObservable();

newId(urlId) {
 this.noId.next(urlId); 
 }

In my View task component, I need to get the id from the URL to send it to the newId() function. When do I do all that from the view-task component?. At the begin, with the OnInit() function. So everytime that someone calls the view-task from the menu, it will send a new id to the newId() function. 

public getId () {
  const id = +this.route.snapshot.paramMap.get('id'); 
  return id; 
}
 
ngOnInit(): void { 
 const id = +this.getId ();
 this.taskService.newId(id) 
}

Now, in the menu navigation component, after the delete() function, I will check if the current task has the same id of the actual task view. So the battle is in the delete function():


delete(task: Task): void { 
  //we save the id , cuz after the delete function, we  gonna lose it 
  const oldId = task.id; 
  this.taskService.deleteTask(task) 
      .subscribe(task => { //we call the defaultId function from task.service.
        this.taskService.defaultId //here we are subscribed to the urlId, which give us the id from the view task 
                 .subscribe(urlId => {
            this.urlId = urlId ;
                  if (oldId == urlId ) { 
                // Location.call('/home'); 
                this.router.navigate(['/home']); 
              } 
          }) 
    }) 
}

Just like that... test it.


 

Add new comment

The content of this field is kept private and will not be shown publicly.

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.