CODEWITHSUNDEEP
angularangular-cli
OldGrey
OldGrey

Reputation: 83

Angular filter incoming service data

I have a service that contains information about members. One of the variables here is the isActive boolean.

In my component, i call the service method to put the information in a variable before showing it in the component.

I would like to only show those which have the isActive set to true.

My service:

import { Injectable } from '@angular/core';

@Injectable()
export class UserinfoService
{
    //methods or services
    getMembers()
    {
        return [
            {
                imageUrl: "../assets/images/filler.jpg",
                firstName: "filler",
                lastName: "filler",
                number: "+123456798",
                bio: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean imperdiet, velit a luctus facilisis, eros nisi tempus est, et hendrerit lacus enim eget sapien. Fusce tristique ut augue vitae interdum. Proin ultrices bibendum rhoncus. Duis non velit nec tellus ultricies consequat. Integer convallis ultrices nibh, eget malesuada augue. Nullam elementum orci in lorem interdum porta. Mauris a dapibus turpis. Nulla id nulla sit amet neque rhoncus blandit. Suspendisse potenti. Fusce vel augue pellentesque, suscipit nisi vel, fermentum tellus. Pellentesque maximus odio neque, quis iaculis eros malesuada sed. Praesent vehicula vestibulum ipsum.",
                isActive: true
            },
            {
                imageUrl: "../assets/images/filler.jpg",
                firstName: "filler",
                lastName: "filler",
                number: "+123456798",
                bio: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean imperdiet, velit a luctus facilisis, eros nisi tempus est, et hendrerit lacus enim eget sapien. Fusce tristique ut augue vitae interdum. Proin ultrices bibendum rhoncus. Duis non velit nec tellus ultricies consequat. Integer convallis ultrices nibh, eget malesuada augue. Nullam elementum orci in lorem interdum porta. Mauris a dapibus turpis. Nulla id nulla sit amet neque rhoncus blandit. Suspendisse potenti. Fusce vel augue pellentesque, suscipit nisi vel, fermentum tellus. Pellentesque maximus odio neque, quis iaculis eros malesuada sed. Praesent vehicula vestibulum ipsum.",
                isActive: false
            },
            {
                imageUrl: "../assets/images/filler.jpg",
                firstName: "filler",
                lastName: "filler",
                number: "+123456798",
                bio: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean imperdiet, velit a luctus facilisis, eros nisi tempus est, et hendrerit lacus enim eget sapien. Fusce tristique ut augue vitae interdum. Proin ultrices bibendum rhoncus. Duis non velit nec tellus ultricies consequat. Integer convallis ultrices nibh, eget malesuada augue. Nullam elementum orci in lorem interdum porta. Mauris a dapibus turpis. Nulla id nulla sit amet neque rhoncus blandit. Suspendisse potenti. Fusce vel augue pellentesque, suscipit nisi vel, fermentum tellus. Pellentesque maximus odio neque, quis iaculis eros malesuada sed. Praesent vehicula vestibulum ipsum.",
                isActive: true
            },
        ];
    }
    //constructor
    constructor()
    {
    }
}

my component:

import { Component, OnInit } from '@angular/core';
import { UserinfoService } from '../services/userinfo.service';


@Component({
  selector: 'app-teammembers',
  templateUrl: './teammembers.component.html',
  styleUrls: ['./teammembers.component.css']
})
export class TeammembersComponent implements OnInit
{
    //props
    teammembers: any[];

    constructor(userinfoService: UserinfoService)
    {
        //getData
        this.teammembers = userinfoService.getMembers();
    }            

  ngOnInit() {
  }
}

Thanks

Upvotes: 0

Views: 67

Answers (3)

Rahul Singh
Rahul Singh

Reputation: 19632

import { Component, OnInit } from '@angular/core';
import { UserinfoService } from '../services/userinfo.service';


@Component({
  selector: 'app-teammembers',
  templateUrl: './teammembers.component.html',
  styleUrls: ['./teammembers.component.css']
})
export class TeammembersComponent implements OnInit
{
    //props
    teammembers: any[];

    constructor(userinfoService: UserinfoService)
    {
        //getData
        this.teammembers = userinfoService.getMembers()
        .filter(member => member.isActive); // add the filter condititon
    }            

  ngOnInit() {
  }
}

UPDATE

 this.teammembers = userinfoService.getMembers()
            .filter(member => member.isActive && member.lastName.includes("ver")); //  ES6 update

Upvotes: 1

CozyAzure
CozyAzure

Reputation: 8478

You can filter using Array.prototype.filter():

constructor(userinfoService: UserinfoService)
{
    //getData
    this.teammembers = userinfoService.getMembers()
                       .filter(member=>member.isActive);
}

Upvotes: 2

Karan Garg
Karan Garg

Reputation: 1103

There could be multiple ways to achieve this. one could be to filter your array in your component using filter method on array and check if isActive property is true second way could be to implement the logic in your html and use directive like *ngIf and hide the information which has isActive to false like this

*ngIf="!isActive"

Upvotes: 0

Related Questions