Styling component dynamically based on condition


#1

THe issue is with this line in html <p id="name">{{found.knownname}}</p> and

ionViewDidEnter(){
  
    for(var i of this.newcases){
      if(i.firstname.includes(this.name) || i.middlename.includes(this.name) || i.lastname.includes(this.name)){        
        this.name=document.getElementById("knownname")
        this.name.style.background="grey"
      }
    }
    
}

home.html

<ion-header> 
<hr>     
</ion-header>

<ion-content>
  <ion-toolbar no-border-top >
      <ion-segment [(ngModel)]="victims" color="list">
          <ion-segment-button value="found">
              Found
          </ion-segment-button>
          <ion-segment-button value="missing">
              Missing
          </ion-segment-button>
          <ion-segment-button value="closed">
              Closed
          </ion-segment-button>
      </ion-segment>
  </ion-toolbar>

  <div [ngSwitch]="victims">
        <ion-list *ngSwitchCase="'found'">
          <div 
            *ngFor = "let found of founds" 
            ion-item color="light" 
            (click)="foundModal(found)">
                <ion-avatar item-start>
                    <img [src]="found.image">
                </ion-avatar>   
                <p id="name">{{found.knownname}}</p>
          </div>
        </ion-list>  
        <ion-list *ngSwitchCase="'missing'">
          <button *ngFor = "let missing of newcases" ion-item color="light" (click)="missingModal(missing)">
                <ion-avatar item-start>
                    <img [src]="missing.image">
                </ion-avatar>                
              <p>{{missing.firstname}} {{missing.lastname}}</p>
          </button>
        </ion-list>       
        <div *ngSwitchCase="'closed'">

          <div>

            <ion-toolbar no-border-top >
                <ion-segment [(ngModel)]="closedcases" color="list">
                    <ion-segment-button value="foundclosed">
                        Found-Closed
                    </ion-segment-button>
                    <ion-segment-button value="missingclosed">
                        Missing-Closed
                    </ion-segment-button>
                </ion-segment>
            </ion-toolbar>

            <div [ngSwitch]="closedcases">
              <ion-list *ngSwitchCase="'foundclosed'">
                <ion-item *ngFor = "let closed of closedfound" ion-item color="light">
                  <ion-avatar item-start>
                      <img [src]="closed.image">
                  </ion-avatar>  
                  <p>{{closed.knownname}}</p>
                </ion-item>
              </ion-list>
            </div>

            <div [ngSwitch]="closedcases">
              <ion-list *ngSwitchCase="'missingclosed'">
                <ion-item *ngFor = "let closed of closedmissing" ion-item color="light">
                  <ion-avatar item-start>
                      <img [src]="closed.image">
                  </ion-avatar>  
                   <p>{{closed.firstname}} {{closed.lastname}}</p>
                </ion-item>
              </ion-list>
            </div>
          </div>
        </div>    
  </div>

  <ion-fab left bottom>
    <button ion-fab mini color="list" (click)="reportCase()"><ion-icon name="add"></ion-icon></button>
  </ion-fab>    
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController, ModalController, NavParams } from 'ionic-angular';
import { Http } from "@angular/http"
import { FoundProfilePage } from "../found-profile/found-profile";
import { MissingProfilePage } from "../missing-profile/missing-profile";
import { ApiProvider } from "../../providers/api/api";
import { CaseAgent } from "../../schemas/caseagent";
import { ReportPage } from "../report/report";
import { NewCase } from "../../schemas/newcase";
import { ClosedMissing } from "../../schemas/closedmissing";
import { ClosedFound } from "../../schemas/closedfound";
import { Found } from "../../schemas/found";
import 'rxjs/add/operator/map';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage{
  founds:Found[];
  found:Found;
  newcases:NewCase[];
  newcase:NewCase;
  closedmissing:ClosedMissing[];
  closedfound:ClosedFound[];
  items;
  foundData;
  missingData;
  closedData;
  victims:any = "found";
  closedcases:any="foundclosed";
  foundInformation:any;
  missingInformation:any;
  closedInformation:any;
  name:any;

constructor(
  public navParams:NavParams, 
  public navCtrl:NavController, 
  private http: Http, 
  public modalCtrl:ModalController,
  private apiProvider:ApiProvider
){}

//Load Data

ionViewDidLoad(){
  this.apiProvider.getCase()
  .subscribe(newcases=>{    
    this.newcases = newcases.data    
  })

  this.apiProvider.getClosedMissing()
    .subscribe(closedMissing=>{
      this.closedmissing=closedMissing.data;
    })

  this.apiProvider.getClosedFound()
    .subscribe(closedFound=>{
      this.closedfound=closedFound.data
    })
  this.apiProvider.getFoundCase()
    .subscribe(foundCase=>{
      this.founds = foundCase.data
    }) 

   console.log(this.newcases)
}

//Matching Module
ionViewDidEnter(){
  
    for(var i of this.newcases){
      if(i.firstname.includes(this.name) || i.middlename.includes(this.name) || i.lastname.includes(this.name)){        
        this.name=document.getElementById("knownname")
        this.name.style.background="grey"
      }
    }
    
}


//Modals
foundModal(found){
  let modal = this.modalCtrl.create(FoundProfilePage,found)
  modal.present()
}

missingModal(missing){
  let modal = this.modalCtrl.create(MissingProfilePage,missing)
  modal.present()
}

reportCase(){
  let modal = this.modalCtrl.create(ReportPage);
  modal.present()
}
}

api.ts //my provider

import { Injectable } from '@angular/core';
import { Http,Headers, Response } from '@angular/http';
import { CaseAgent } from "../../schemas/caseagent";
import { NewCase } from "../../schemas/newcase";
import { ClosedMissing } from "../../schemas/closedmissing";
import { ClosedFound } from "../../schemas/closedfound";
import { CareOf } from "../../schemas/careof";
import { Found } from "../../schemas/found";
import 'rxjs/add/operator/map';


@Injectable()
export class ApiProvider {
	data:any;

  constructor(
  	public http: Http){}

  //retrieve
  getCaseAgents(){
  	return this.http.get("http://localhost:3000/api/caseagent")
  	.map(res=>res.json());
  }

  getCase(){
    return this.http.get("http://localhost:3000/api/missing")
    .map((res:Response)=>res.json());
  }


  getClosedMissing(){
    return this.http.get("http://localhost:3000/api/closedmissing")
    .map((res:Response)=>res.json());
  }

  getClosedFound(){
    return this.http.get("http://localhost:3000/api/closedfound")
    .map((res:Response)=>res.json());
  }

  getFoundCase(){
    return this.http.get("http://localhost:3000/api/found")
    .map(res=>res.json())
  }

  getCareOf(){
    return this.http.get("http://localhost:3000/api/careof")
    .map(res=>res.json())
  }

  //add
  addCaseAgent(newCaseAgent){
  	var headers = new Headers();
    headers.append("Accept","application/json");
  	headers.append("Content-Type","application/json");
  	return this.http.post("http://localhost:3000/api/caseagent",newCaseAgent,{headers:headers})
  	.map(res=>res.json())
  }

  addCase(newCase){
    var headers = new Headers();
    headers.append("Content-Type","application/json");
    return this.http.post("http://localhost:3000/api/missing",newCase,{headers:headers})
    .map(res=>res.json())
  }

  addClosedMissing(newClosedMissing){
    var headers = new Headers();
    headers.append("Content-Type","application/json");
    return this.http.post("http://localhost:3000/api/closedmissing",newClosedMissing,{headers:headers})
    .map(res=>res.json())
  }

  addClosedFound(newClosedFound){
    var headers = new Headers();
    headers.append("Content-Type","application/json");
    return this.http.post("http://localhost:3000/api/closedfound",newClosedFound,{headers:headers})
    .map(res=>res.json())
  }

  //remove
  deleteMCase(id){
    return this.http.delete("http://localhost:3000/api/missing/"+id)
    .map(res=>res.json)
  }

  deleteFCase(id){
    return this.http.delete("http://localhost:3000/api/found/"+id)
    .map(res=>res.json)
  }



  
}


#2

Hi @ogembodenis
Create class with the styles you want for this condition and use [ngClass]