Utilizing separately generated elements from ngFor

Question

Utilizing separately generated elements from ngFor

I am currently working with an angular2 component that generates a list of chapters using an *ngFor= tag. However, I am facing an issue where I am unable to individually target these chapters in my ng2 component to highlight the selected chapter. I expected the code snippet below to produce something like this:

<p class="chapter 1" #1>1. My First Chapter</p>

But unfortunately, the #1 is not being generated as expected, resulting in my selector not functioning properly and preventing me from setting the first chapter in the list as selected by default.

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'tutorial',
  template: `
<div class="content row">
    <div class="chapters col s3">
        <h3>Chapters:</h3>
        <p *ngFor="let chapter of chapters" class="chapter" #{{chapter.number}}>{{chapter.number}}. {{chapter.title}}</p>
    </div>
</div>
`
})
export class bookComponent implements AfterViewInit {
    public chapters = _chapters;
    @ViewChild('2') el:ElementRef;

    ngAfterViewInit() {
      this.el.nativeElement.className += " clicked";
    }
 }

What steps should I take to be able to individually select the dynamically generated <p> tags?

dom angular typescript

Answer 1

Answer №1

If you are looking for a more angular approach to your use case, consider the following:

<p *ngFor="let chapter of chapters; let i=index" (click)="clickedItem = i" [class.clicked]="i == clickedItem" class="chapter" #{{chapter.number}}>{{chapter.number}}. {{chapter.title}}</p>

export class bookComponent implements AfterViewInit {
  public chapters = _chapters;
  clickedItem: number;
}

It is recommended to update the model and bind the view to ensure Angular accurately reflects the changes in the model without manually modifying the DOM.

Answer 2

If you are looking for a more angular approach to your use case, consider the following:

<p *ngFor="let chapter of chapters; let i=index" (click)="clickedItem = i" [class.clicked]="i == clickedItem" class="chapter" #{{chapter.number}}>{{chapter.number}}. {{chapter.title}}</p>

export class bookComponent implements AfterViewInit {
  public chapters = _chapters;
  clickedItem: number;
}

It is recommended to update the model and bind the view to ensure Angular accurately reflects the changes in the model without manually modifying the DOM.

Answer 3

Answer №2

To control the addition or removal of the clicked class, I recommend using NgFor loop:

<p *ngFor="let section of sections" class="section"
  [class.clicked]="section.id === activeSectionId">
  {{section.id}}. {{section.title}}
</p>

All you have to do is adjust the value of activeSectionId in your component logic.

export class novelComponent {
    public sections = _sections;
    private activeSectionId = 1;
}

Answer 4

To control the addition or removal of the clicked class, I recommend using NgFor loop:

<p *ngFor="let section of sections" class="section"
  [class.clicked]="section.id === activeSectionId">
  {{section.id}}. {{section.title}}
</p>

All you have to do is adjust the value of activeSectionId in your component logic.

export class novelComponent {
    public sections = _sections;
    private activeSectionId = 1;
}

Answer 5

Answer №3

Utilizing the directive with HostListener enables you to choose an element as depicted below.

See it in action : http://plnkr.co/edit/mtmCKg7kPgZoerqT0UIO?p=preview

import {Directive, Attribute,ElementRef,Renderer,Input,HostListener} from '@angular/core';

@Directive({
  selector: '[myAttr]'
})

export class myDir {
    constructor(private el:ElementRef,private rd: Renderer){
      console.log('fired');
      console.log(el.nativeElement); 
    }

    @HostListener('click', ['$event.target'])
    onClick(btn) {
      if(this.el.nativeElement.className=="selected"){
          this.el.nativeElement.className ="";  
      }else{
          this.el.nativeElement.className ="selected";
      }
   }
}

//our root app component
import {Component} from '@angular/core';

@Component({
  selector: 'my-app',
  directives:[myDir],
  template: 
  `
  <style>
    .selected{
      color:red;
      background:yellow;
    }
  </style>
    <div class="content row">
    <div class="chapters col s3">
        <h3>Chapters:</h3>
        <p myAttr *ngFor="let chapter of chapters" class="chapter" #{{chapter.number}}>{{chapter.number}}. {{chapter.title}}</p>
    </div>
</div>
  `
})
export class App {
  chapters=[{number:1,title:"chapter1"},{number:2,title:"chapter2"},{number:3,title:"chapter3"}]


}

Answer 6

Utilizing the directive with HostListener enables you to choose an element as depicted below.

See it in action : http://plnkr.co/edit/mtmCKg7kPgZoerqT0UIO?p=preview

import {Directive, Attribute,ElementRef,Renderer,Input,HostListener} from '@angular/core';

@Directive({
  selector: '[myAttr]'
})

export class myDir {
    constructor(private el:ElementRef,private rd: Renderer){
      console.log('fired');
      console.log(el.nativeElement); 
    }

    @HostListener('click', ['$event.target'])
    onClick(btn) {
      if(this.el.nativeElement.className=="selected"){
          this.el.nativeElement.className ="";  
      }else{
          this.el.nativeElement.className ="selected";
      }
   }
}

//our root app component
import {Component} from '@angular/core';

@Component({
  selector: 'my-app',
  directives:[myDir],
  template: 
  `
  <style>
    .selected{
      color:red;
      background:yellow;
    }
  </style>
    <div class="content row">
    <div class="chapters col s3">
        <h3>Chapters:</h3>
        <p myAttr *ngFor="let chapter of chapters" class="chapter" #{{chapter.number}}>{{chapter.number}}. {{chapter.title}}</p>
    </div>
</div>
  `
})
export class App {
  chapters=[{number:1,title:"chapter1"},{number:2,title:"chapter2"},{number:3,title:"chapter3"}]


}

Utilizing separately generated elements from ngFor

Answer №1

Answer №2

Answer №3

Similar questions

Every time an action is carried out in the app, React generates countless TypeError messages

Tips for including a set width on Y-Axis labels

Discover the method of sending individual row data to a component using *ngFor in Angular 4

Angular 2's one-of-a-kind singleton solution

Converting a JavaScript function to work in TypeScript: a step-by-step guide

Issue encountered when running a minification build on Angular 5

Tips for integrating the react-financial-charts library into your React and JavaScript project

Click to Rotate Angular Chevron

Storing JSON data retrieved from an API into a class property using the fetch function: a step-by-step guide

Error encountered when attempting to implement Material Angular 2 autocomplete functionality

Acquiring information from a Service and saving it in a Child component - Angular version 11

Express Server Providers for Angular 17's Server-Side Rendering

Creating a TypeScript function that utilizes generics to automatically infer the return type

Pull information from API and populate a dropdown menu in an Angular material select input

Encountering a "Cannot POST" error in Angular upon redirection to a callback URL with a SAML response

Never display mat-select panel when closed

Printing the default value set in the constructor using HTML

Mutations are not set up in the schema

What is the mechanism behind the widening of object literal types in Typescript inference?

What could be the reason for encountering TypeScript within the Vue.js source code?