Dynamic card with condition using Angular & Bootstrap

Question

I'm trying to make my cards dynamic but they have a condition. I checked the angular doc and I couldn't find the answer. Basically I have a cards component with the condition of clicking on a nav link it shows one set of cards and the other shows another set of cards. The component cards calls the card-item 3 times for each condition. In my component card item I can't seem to find how to apply that condition and refer to either set of card-item content in my ts. Here's the code.

<--! HTML OF CARDS -->

 <div class="cardbg">
     <ul class="nav topnav active justify-content-center">
      <li class="nav-item item-1">
        <a class="nav-link" (click)="toggle(1)">Je suis Consultant</a>
      </li>
      <li class="nav-item item-2">
        <a class="nav-link" (click)="toggle(2)">Je suis Partenaire</a>
      </li>
    </ul>


  <hr class="m-0">


     <!-- OFFRES -->
    <div *ngIf="consulant">
      <div class="d-flex flex-row justify-content-center">
        <h4 class="mt-3">Offres</h4>
      </div>
      <app-card-item>[offres]="offres"</app-card-item>
      <app-card-item>[offres]="offres"</app-card-item>
      <app-card-item>[offres]="offres"</app-card-item>
    </div>

    <!--  CV  -->
    <div *ngIf="company">
        <div class="d-flex flex-row justify-content-center">
          <h4 class="mt-3">CV</h4>
        </div>
        <app-card-item>[cv]="cv"</app-card-item>
        <app-card-item>[cv]="cv"</app-card-item>
        <app-card-item>[cv]="cv"</app-card-item>
    </div>


</div>

<--! TS OF CARDS -->
import { Component, OnInit, Input } from "@angular/core";

@Component({
  selector: "app-cards",
  templateUrl: "./cards.component.html",
  styleUrls: ["./cards.component.scss"]
})
export class CardsComponent implements OnInit {



 constructor() { }

   company: boolean = false;
   consulant: boolean = true;

   toggle(elem: number) {
     if (elem == 1) {
     this.consulant = true;
     this.company = false;
   }
   if (elem == 2) {
    this.consulant = false;
   this.company = true;
   }
 }
 ngOnInit() {}
 }

<--! HTML OF CARD ITEM -->

<div class="row mx-2">
  <div class="col-lg-4 col-md-4 col-sm-5 col-xs-4" *ngFor="let x of card-item">
    <div class="card">
        <div class="card-body">
          <h5 class="card-title">{{x.titre}}</h5>
          <p class="card-text">{{x.contenu}}</p>
          <p class="card-subtitle">{{x.montant}}</p>
        </div>
      </div>
 </div>

 <-- TS OF CARD-ITEM -->

import { Component, OnInit } from '@angular/core';

 @Component({
   selector: 'app-card-item',
   templateUrl: './card-item.component.html',
   styleUrls: ['./card-item.component.scss']
   })
  export class CardItemComponent implements OnInit {


    offres = [
    {titre: "Architectes Sécurité",
    contenu: "Nous recherchons un Architecte sécurité pour une mission longue (3 mois 
    renouvelables horizon 2 ans voire plus) Paris intra-muros.",
    montant: " Partenaire historique F2I - TJM 700€"
    },
   {titre: "ingénieur de Production AIX/LINUX",
   contenu: "Nous recherchons un Ingénieur de Production AIX/LINUX sur St Quentin (78) pour 
   une mission de plusieurs mois.",
   montant: "Partenaire historique F2I - TJM 600€"
   },
  {titre: "Chef de Projet Technique",
  contenu: "Nous rechercons un Concepteur Technique / Chef de projet Contexte : Fusion de 
  deux plateformes et d'une migration d'une soixantaine de sites Missions.",
  montant: "Partenaire historique F2I - TJM 600€"
  }

 ]

 cv = [
 {titre: "Expert JAVA SWING / JEE / JAVA",
  contenu: "Ingénieur d'étude (30 ans - 78 Versailles). AB INITO, C++? COBRA, ORACLE, POWER 
 AMC, SCRIPT SHELL, DATASTAGE, DECISIONNEL, Big Data.",
 montant: "TJM: 500€"
 },
 {titre: "Architecte UNIX",
 contenu: "Architecte, Consultant Technique - Architecte (35 ans - 77 Villeparisis). UNIX, 
 VMWARE, CITRIX, WINDOWS.",
 montant: "TJM: 650€"

 },
 {titre: "PROJECT MANAGEMENT OFFICE",
 contenu: "Assistant à Maîtrise d'Ouvrage - PMO (32 ans - 75 Paris). PROJECT MANAGEMENT 
 OFFICE, MS OFFICE, MS PROJECT? GLOBAL PORTFOLIO.",
 montant: "TJM: 500€"

   }
 ]

constructor() { }

ngOnInit() {
 }

}