ngFor First and Last Instance of a Class Do This

Question

I am using Angular 4+. Please note: first and last needs to be based on the class instance, not the element. So a let first = first in the ngFor will not work. I currently imported jQuery to handle this but would like to see if there is a way not to use jQ.

In the component ts file:

items: any = [{number: 0, text: 'blah blah'},{number: 0, text: 'blah blah'},{number: 1, text: 'blah blah'},{number: 1, text: 'blah blah'},{number: 1, text: 'blah blah'}, etc...

In the HTML file:

<ion-row *ngFor="let item of items [ngClass]="'item-class-' + item.number">
  <ion-col>{{item.text}}</ion-col>
</ion-row>

Now what I want to do is grab the first instance of a class and last - once I have it I want to style it or add a class to the row. For example in jQuery I would have done this:

$( 'ion-row.item-class-0' ).first().css( 'background-color', 'red' );
$( 'ion-row.item-class-1' ).first().css( 'background-color', 'red' );

Chandru · Answer 1 · 2017-10-20T17:17:51.657

0

updated answer :

template :

<ion-row *ngFor="let item of items" [ngClass]="'item-class-' + item.number">
    <ion-col>{{item.text}}</ion-col>
  </ion-row>

component.ts

import { Component, AfterViewInit } from '@angular/core';
import * as $ from 'jquery';

@Component({...})
export class HomePage {

    items: any = [{
        number: 0,
        text: 'blah blah'
    }, {
        number: 0,
        text: 'blah blah'
    }, {
        number: 1,
        text: 'blah blah'
    }, {
        number: 1,
        text: 'blah blah'
    }, {
        number: 1,
        text: 'blah blah'
    }];

    ngAfterViewInit() {
        $( 'ion-row.item-class-0').first().css( 'background-color', 'red' );
        $( 'ion-row.item-class-1').last().css( 'background-color', 'red' );
    }
}

it will be working for me try this :

edited Oct 20 '17 at 17:17

answered Oct 20 '17 at 16:52

Chandru

10,864
6
38
53

first and last need to be based on the class instance, not the element. – RooksStrife Oct 20 '17 at 16:54
in this jquery method where it will be declared ? ngOnit or constructor ?? – Chandru Oct 20 '17 at 17:01
In Class ngAfterViewInit() – RooksStrife Oct 20 '17 at 17:01
@RooksStrife i just updated answer can check and try like this ? and if it's not working in your project check your jquery if it's installed correctly or working – Chandru Oct 20 '17 at 17:19
thanks, I have this. I am trying to do it without using jQuery- in an Angular way if possible. If not I'll stick with jQ. – RooksStrife Oct 20 '17 at 17:47

ngFor First and Last Instance of a Class Do This

1 Answers1