Tips for updating an Angular renderer's value

Question

Tips for updating an Angular renderer's value

I have a challenge with implementing a background color change when clicking on a th element. Currently, it works fine when I click on it, but I would like to make it so that if I click on another th element, the previous one will turn off. However, if I click on the same th again, it should not turn off until I switch to another th. I am working with Angular 8 and my directive code is as follows:

@Directive({
  selector: '[sortColumn]'
})
export class SortDirective implements OnInit {

  @Input() data: any;
  @Input('sortKey') key: any;
  @Input('sortNumber') num: number;
  private toggleSort: boolean = false;

  constructor(private el: ElementRef, private renderer: Renderer) {
  }

  ngOnInit() {
    this.renderer.listen(this.el.nativeElement, 'click', (event) => {
      let parentNode = this.el.nativeElement.parentNode;
      let children = parentNode.children;

      if (this.data && this.key) {
        let sortedData: any = this.sortArray();
      }

      if (this.data && this.num) {
        let sortedData: any = this.sortNums()
      }     
      this.changeTextColor()
    })
  }

  changeTextColor() {
    this.renderer.setElementStyle(this.el.nativeElement,"background-color","green");
    this.toggleSort = !this.toggleSort;
  }
}

javascript angular typescript

Answer 1

Answer №1

Utilizing a service for efficient management...

One approach is registering all directives to a designated service in order to oversee the state of the directives, specifically isActive.

In this demonstration, we showcase a button Directive as an illustration, but the underlying principles can be adapted to suit your requirements:

The managerial service:

  managedDirectives: BtnDirective[] = [];

  addManagedDirective(btn: BtnDirective) {
    this.managedDirectives.push(btn);
  }

  removeManagedDirective(btn: BtnDirective) {
    this.managedDirectives.filter(item => item !== btn);
  }

  activate(btn: BtnDirective) {
    this.managedDirectives.map(item => {
      if(item === btn) {
        item.isActive = true;
      } else {
        item.isActive = false;
      }
    })
  }

The directive:

  @HostBinding('class.is-active')
  isActive: boolean;

  @HostListener('click') onClick() {
    this.managerService.activate(this);
  }

  constructor(
    private managerService: ManagerService
  ) { }

  ngOnInit(): void {
    this.managerService.addManagedDirective(this);
  }

  ngOnDestroy() {
    this.managerService.removeManagedDirective(this);
  }

A comprehensive working example is accessible via: https://stackblitz.com/edit/angular-1gk9ya

This service-based solution operates autonomously from the DOM structure without the necessity of querying DOM elements directly. Embrace the power of Angular over jQuery ;)

Answer 2

Utilizing a service for efficient management...

One approach is registering all directives to a designated service in order to oversee the state of the directives, specifically isActive.

In this demonstration, we showcase a button Directive as an illustration, but the underlying principles can be adapted to suit your requirements:

The managerial service:

  managedDirectives: BtnDirective[] = [];

  addManagedDirective(btn: BtnDirective) {
    this.managedDirectives.push(btn);
  }

  removeManagedDirective(btn: BtnDirective) {
    this.managedDirectives.filter(item => item !== btn);
  }

  activate(btn: BtnDirective) {
    this.managedDirectives.map(item => {
      if(item === btn) {
        item.isActive = true;
      } else {
        item.isActive = false;
      }
    })
  }

The directive:

  @HostBinding('class.is-active')
  isActive: boolean;

  @HostListener('click') onClick() {
    this.managerService.activate(this);
  }

  constructor(
    private managerService: ManagerService
  ) { }

  ngOnInit(): void {
    this.managerService.addManagedDirective(this);
  }

  ngOnDestroy() {
    this.managerService.removeManagedDirective(this);
  }

A comprehensive working example is accessible via: https://stackblitz.com/edit/angular-1gk9ya

This service-based solution operates autonomously from the DOM structure without the necessity of querying DOM elements directly. Embrace the power of Angular over jQuery ;)

Answer 3

Answer №2

One way to handle the styling of a clicked element is to add a specific class to it instead of directly changing its style properties. By assigning a class, you can ensure that only one element has this class at a time and easily manage its appearance.

@Directive({
  selector: '[sortColumn]'
})
export class SortDirective implements OnInit {

  @Input() data: any;
  @Input('sortKey') key: any;
  @Input('sortNumber') num: number;
  private toggleSort: boolean = false;

  constructor(private el: ElementRef, private renderer: Renderer) {
  }

  ngOnInit() {
    this.renderer.listen(this.el.nativeElement, 'click', (event) => {
      let parentNode = this.el.nativeElement.parentNode;
      let children = parentNode.children;

      if (this.data && this.key) {
        let sortedData: any = this.sortArray();
      }

      if (this.data && this.num) {
        let sortedData: any = this.sortNums()
      }     
      this.changeTextColor()
    })
  }

  changeTextColor() {
    let currentlyActiveElement = document.querySelector('.active');
    // Check if there is an active class on another element and remove it
    if(currentlyActiveElement) {
        currentlyActiveElement.classList.toggle('active');
    }


    this.renderer.addClass(this.el.nativeElement,"active");
    this.toggleSort = !this.toggleSort;
  }
}

To style the clicked elements in your CSS:

.active {
    background-color: green;
}

Answer 4

One way to handle the styling of a clicked element is to add a specific class to it instead of directly changing its style properties. By assigning a class, you can ensure that only one element has this class at a time and easily manage its appearance.

@Directive({
  selector: '[sortColumn]'
})
export class SortDirective implements OnInit {

  @Input() data: any;
  @Input('sortKey') key: any;
  @Input('sortNumber') num: number;
  private toggleSort: boolean = false;

  constructor(private el: ElementRef, private renderer: Renderer) {
  }

  ngOnInit() {
    this.renderer.listen(this.el.nativeElement, 'click', (event) => {
      let parentNode = this.el.nativeElement.parentNode;
      let children = parentNode.children;

      if (this.data && this.key) {
        let sortedData: any = this.sortArray();
      }

      if (this.data && this.num) {
        let sortedData: any = this.sortNums()
      }     
      this.changeTextColor()
    })
  }

  changeTextColor() {
    let currentlyActiveElement = document.querySelector('.active');
    // Check if there is an active class on another element and remove it
    if(currentlyActiveElement) {
        currentlyActiveElement.classList.toggle('active');
    }


    this.renderer.addClass(this.el.nativeElement,"active");
    this.toggleSort = !this.toggleSort;
  }
}

To style the clicked elements in your CSS:

.active {
    background-color: green;
}

Tips for updating an Angular renderer's value

Answer №1

Answer №2

Similar questions

Guide on how to navigate to a different page while making a request in ASP.NET

Instructions for incorporating animation into the CSS properties of an element as the class is updated using jQuery

Ways to retrieve the global state from within the mutation namespace module

Arrangement of elements in MongoDB

Utilize jQuery to retrieve the classes of list elements

Tips for utilizing sorting, searching, and pagination features in Bootstrap 5 tables

Utilizing the power of Ionic Native with AngularJS 1 for Cordova SQLite Integration

Tips for transferring information from Angular 6 to Node.js

Loop through a collection of unique identifiers for documents and establish event listeners in Firestore

Error 500: Issue with JQuery AJAX File Upload

Using Selenium and Python to scrape text from a continuously refreshing webpage after each scroll

ReactJS issue: I am unable to display the dropdown menu while looping through an array

NodeJS - Bluebird: implementing a loop with a waiting mechanism for completion

Tips for refreshing only a portion of a webpage using JavaScript/jQuery

Using webpack to group files from the "src" directory into the "public" folder

Retrieving JSON data and transforming it into HTML

Error: The communication channel abruptly closed before the expected response could be delivered

Highlight all the written content within the text box

Ajax causing submission of 'undefined' data

Sending data from Spark to my Angular8 projectLearn how to seamlessly transfer data from your