title: Rendering related records side by side in Angular 7
body: <p>I am trying to render the following JSON object on angular 7 UI. </p>
  
  <p>TermDetail object contains <code>LegalFundClassCommercialViewModel</code> and <code>LegalFundClassSideLetterViewModel</code> objects. The two are related by <code>LegalParentClassId</code>. What I am looking at that the related objects should render side by side. At the moment it is showing only the matching record.How do I achieve this in angular</p>
  
  <p>Here is the jsfiddle</p>
  
  <p><a href="https://jsfiddle.net/b69dphxr/" rel="nofollow noreferrer">https://jsfiddle.net/b69dphxr/</a></p>
  
  <p>So for example  if I have the following records:</p>
  
  <pre><code>Id     Name  
  23456  Test
  
  Id     Name 
  23457  Test1
  
  Id     Name   LegalParentClassId
  23458  Test2  23456
  </code></pre>
  
  <p>It should then in the UI render in the following sequence</p>
  
  <pre><code>23456,  23458,  23457  
  </code></pre>
  
  <p>JSON</p>
  
  <pre><code>{"LiqLockupType":null,"LiqDurationMonths":null,"LiqGateSource":null,"LegalFundClassCommercialViewModel":[{"Description":"Class B","AuditSummary":"skeeling Jun 11, 2018","FeesReviewSummary":"","TermsReviewSummary":"","Id":11166,"FundId":5508,"FundClassType":1,"CurrencyId":null,"PrimaryCurrencyName":null,"OtherCurrencyName":null,"ManagerStrategyId":null,"ManagerStrategyName":null,"SubVotingId":null,"SubVotingName":null,"SubHotIssueId":null,"SubHotIssueName":null,"RedsFrqncyId":5,"RedsFrqncyName":"Quarterly","RedsNoticeDays":45,"NoticeTypeOfDaysId":2,"NoticeTypeOfDaysName":"Calendar","LockupTypeId":null,"LockupTypeName":null,"HardDurationMonthsId":null,"HardDurationMonthsName":null,"SoftDurationMonthsId":null,"SoftDurationMonthsName":null,"LockupFees0To12Pct":3,"LockupFees12To24Pct":null,"LockupFees24To36Pct":null,"WebfolioRedsFee":"12 M,0.03|","LockupComments":null,"ApplyGateDecliningBalance":false,"GateInvestorPct":null,"GateSourceId":null,"GateSourceName":null,"GateFundClassPct":null,"IntialProceeds":null,"PaymentInDays":null,"PaymentTypeOfDaysId":null,"PaymentTypeOfDaysName":null,"HoldbackPercentage":null,"HoldbackPayment":null,"HoldbackTypeOfDaysId":null,"HoldbackTypeOfDaysName":null,"ManagementFeeRate":null,"IncentiveFeeRate":null,"RealizationFrequencyId":null,"RealizationFrequencyName":null,"HighWaterMarkId":null,"HighWaterMarkName":null,"HurdleRate":false,"HurdleRateBasisId":null,"HurdleRateBasisName":null,"HurdleRatePct":null,"HurdleRateIndexId":null,"HurdleRateIndexName":null,"PreferredReturnRatePct":null,"GpCatchUp":null,"PreferredReturnComments":null,"Clawback":false,"ClawbackPercentage":null,"AssetFeeDiscountTypeId":null,"AssetFeeDiscountTypeName":null,"FeeComments":null,"FeeReductionsNegotiated":null,"InvestmentStatusId":0,"LegalParentClassId":null},{"Description":"Class A","AuditSummary":"skeeling Jun 11, 2018","FeesReviewSummary":"","TermsReviewSummary":"","Id":11167,"FundId":5508,"FundClassType":1,"CurrencyId":null,"PrimaryCurrencyName":null,"OtherCurrencyName":null,"ManagerStrategyId":null,"ManagerStrategyName":null,"SubVotingId":null,"SubVotingName":null,"SubHotIssueId":null,"SubHotIssueName":null,"RedsFrqncyId":5,"RedsFrqncyName":"Quarterly","RedsNoticeDays":45,"NoticeTypeOfDaysId":2,"NoticeTypeOfDaysName":"Calendar","LockupTypeId":null,"LockupTypeName":null,"HardDurationMonthsId":null,"HardDurationMonthsName":null,"SoftDurationMonthsId":null,"SoftDurationMonthsName":null,"LockupFees0To12Pct":3,"LockupFees12To24Pct":null,"LockupFees24To36Pct":null,"WebfolioRedsFee":"12 M,0.03|","LockupComments":null,"ApplyGateDecliningBalance":false,"GateInvestorPct":null,"GateSourceId":null,"GateSourceName":null,"GateFundClassPct":null,"IntialProceeds":null,"PaymentInDays":null,"PaymentTypeOfDaysId":null,"PaymentTypeOfDaysName":null,"HoldbackPercentage":null,"HoldbackPayment":null,"HoldbackTypeOfDaysId":null,"HoldbackTypeOfDaysName":null,"ManagementFeeRate":null,"IncentiveFeeRate":null,"RealizationFrequencyId":null,"RealizationFrequencyName":null,"HighWaterMarkId":null,"HighWaterMarkName":null,"HurdleRate":false,"HurdleRateBasisId":null,"HurdleRateBasisName":null,"HurdleRatePct":null,"HurdleRateIndexId":null,"HurdleRateIndexName":null,"PreferredReturnRatePct":null,"GpCatchUp":null,"PreferredReturnComments":null,"Clawback":false,"ClawbackPercentage":null,"AssetFeeDiscountTypeId":null,"AssetFeeDiscountTypeName":null,"FeeComments":null,"FeeReductionsNegotiated":null,"InvestmentStatusId":0,"LegalParentClassId":null},{"Description":"Class D","AuditSummary":" ","FeesReviewSummary":"","TermsReviewSummary":"","Id":13714,"FundId":237146,"FundClassType":3,"CurrencyId":null,"PrimaryCurrencyName":null,"OtherCurrencyName":null,"ManagerStrategyId":null,"ManagerStrategyName":null,"SubVotingId":null,"SubVotingName":null,"SubHotIssueId":null,"SubHotIssueName":null,"RedsFrqncyId":5,"RedsFrqncyName":"Quarterly","RedsNoticeDays":45,"NoticeTypeOfDaysId":2,"NoticeTypeOfDaysName":"Calendar","LockupTypeId":null,"LockupTypeName":null,"HardDurationMonthsId":null,"HardDurationMonthsName":null,"SoftDurationMonthsId":null,"SoftDurationMonthsName":null,"LockupFees0To12Pct":null,"LockupFees12To24Pct":null,"LockupFees24To36Pct":null,"WebfolioRedsFee":null,"LockupComments":null,"ApplyGateDecliningBalance":false,"GateInvestorPct":null,"GateSourceId":null,"GateSourceName":null,"GateFundClassPct":null,"IntialProceeds":null,"PaymentInDays":null,"PaymentTypeOfDaysId":null,"PaymentTypeOfDaysName":null,"HoldbackPercentage":null,"HoldbackPayment":null,"HoldbackTypeOfDaysId":null,"HoldbackTypeOfDaysName":null,"ManagementFeeRate":null,"IncentiveFeeRate":null,"RealizationFrequencyId":null,"RealizationFrequencyName":null,"HighWaterMarkId":null,"HighWaterMarkName":null,"HurdleRate":false,"HurdleRateBasisId":null,"HurdleRateBasisName":null,"HurdleRatePct":null,"HurdleRateIndexId":null,"HurdleRateIndexName":null,"PreferredReturnRatePct":null,"GpCatchUp":null,"PreferredReturnComments":null,"Clawback":false,"ClawbackPercentage":null,"AssetFeeDiscountTypeId":null,"AssetFeeDiscountTypeName":null,"FeeComments":null,"FeeReductionsNegotiated":null,"InvestmentStatusId":0,"LegalParentClassId":null},{"Description":"Class B","AuditSummary":"rmenon Jun 04, 2019","FeesReviewSummary":"dmukerji May 28, 2019","TermsReviewSummary":"rmenon Jun 04, 2019","Id":13717,"FundId":237146,"FundClassType":3,"CurrencyId":null,"PrimaryCurrencyName":null,"OtherCurrencyName":null,"ManagerStrategyId":null,"ManagerStrategyName":null,"SubVotingId":null,"SubVotingName":null,"SubHotIssueId":null,"SubHotIssueName":null,"RedsFrqncyId":5,"RedsFrqncyName":"Quarterly","RedsNoticeDays":46,"NoticeTypeOfDaysId":2,"NoticeTypeOfDaysName":"Calendar","LockupTypeId":5,"LockupTypeName":"No Lock","HardDurationMonthsId":null,"HardDurationMonthsName":null,"SoftDurationMonthsId":null,"SoftDurationMonthsName":null,"LockupFees0To12Pct":0,"LockupFees12To24Pct":0,"LockupFees24To36Pct":0,"WebfolioRedsFee":null,"LockupComments":"In the SOT, there is a 1-year lock, this is no longer applicable and was only applicable for the original transfer from Sylebra commingled.","ApplyGateDecliningBalance":false,"GateInvestorPct":0,"GateSourceId":null,"GateSourceName":null,"GateFundClassPct":0,"IntialProceeds":100,"PaymentInDays":30,"PaymentTypeOfDaysId":2,"PaymentTypeOfDaysName":"Calendar","HoldbackPercentage":0,"HoldbackPayment":null,"HoldbackTypeOfDaysId":null,"HoldbackTypeOfDaysName":null,"ManagementFeeRate":0,"IncentiveFeeRate":30,"RealizationFrequencyId":7,"RealizationFrequencyName":"Yearly","HighWaterMarkId":1,"HighWaterMarkName":"Standard","HurdleRate":false,"HurdleRateBasisId":null,"HurdleRateBasisName":null,"HurdleRatePct":null,"HurdleRateIndexId":null,"HurdleRateIndexName":null,"PreferredReturnRatePct":0,"GpCatchUp":null,"PreferredReturnComments":null,"Clawback":false,"ClawbackPercentage":null,"AssetFeeDiscountTypeId":1,"AssetFeeDiscountTypeName":"Management Fee","FeeComments":"New fees effective 1/1/2019 \n\nManagement fee is an Asset Based fee of the lesser of $1M or 1.5% of NAV.  This is a payment in advance of any performance fee, making the management fee effectively zero.\n\nIncentive fee is 30% on first 15% of performance, 35% thereafter.\n\nAudit holdbacks should be zero unless the vehicle is in liquidation, in which case it's typically a 5% holdback paid once the audit is completed where applicable or 2-3 months after the final NAV once all the expenses have been paid.","FeeReductionsNegotiated":null,"InvestmentStatusId":1,"LegalParentClassId":null},{"Description":"Class A","AuditSummary":"rmenon Jun 04, 2019","FeesReviewSummary":"dmukerji May 28, 2019","TermsReviewSummary":"kweigand Jan 16, 2019","Id":13713,"FundId":237146,"FundClassType":3,"CurrencyId":null,"PrimaryCurrencyName":null,"OtherCurrencyName":null,"ManagerStrategyId":null,"ManagerStrategyName":null,"SubVotingId":2,"SubVotingName":"Yes","SubHotIssueId":null,"SubHotIssueName":null,"RedsFrqncyId":5,"RedsFrqncyName":"Quarterly","RedsNoticeDays":46,"NoticeTypeOfDaysId":2,"NoticeTypeOfDaysName":"Calendar","LockupTypeId":5,"LockupTypeName":"No Lock","HardDurationMonthsId":null,"HardDurationMonthsName":null,"SoftDurationMonthsId":null,"SoftDurationMonthsName":null,"LockupFees0To12Pct":0,"LockupFees12To24Pct":0,"LockupFees24To36Pct":0,"WebfolioRedsFee":null,"LockupComments":"In the SOT, there is a 1-year lock, this is no longer applicable and was only applicable for the original transfer from Sylebra commingled.","ApplyGateDecliningBalance":false,"GateInvestorPct":0,"GateSourceId":null,"GateSourceName":null,"GateFundClassPct":0,"IntialProceeds":100,"PaymentInDays":30,"PaymentTypeOfDaysId":2,"PaymentTypeOfDaysName":"Calendar","HoldbackPercentage":0,"HoldbackPayment":null,"HoldbackTypeOfDaysId":null,"HoldbackTypeOfDaysName":null,"ManagementFeeRate":0,"IncentiveFeeRate":30,"RealizationFrequencyId":7,"RealizationFrequencyName":"Yearly","HighWaterMarkId":1,"HighWaterMarkName":"Standard","HurdleRate":false,"HurdleRateBasisId":null,"HurdleRateBasisName":null,"HurdleRatePct":null,"HurdleRateIndexId":null,"HurdleRateIndexName":null,"PreferredReturnRatePct":0,"GpCatchUp":null,"PreferredReturnComments":null,"Clawback":false,"ClawbackPercentage":null,"AssetFeeDiscountTypeId":1,"AssetFeeDiscountTypeName":"Management Fee","FeeComments":"New fees effective 1/1/2019 \n\nManagement fee is an Asset Based fee of the lesser of $1M or 1.5% of NAV.  This is a payment in advance of any performance fee, making the management fee effectively zero.\n\nIncentive fee is 30% on first 15% of performance, 35% thereafter.\n\nAudit holdbacks should be zero unless the vehicle is in liquidation, in which case it's typically a 5% holdback paid once the audit is completed where applicable or 2-3 months after the final NAV once all the expenses have been paid.","FeeReductionsNegotiated":null,"InvestmentStatusId":1,"LegalParentClassId":null},{"Description":"Class B1","AuditSummary":"kweigand Feb 19, 2019","FeesReviewSummary":"kweigand Feb 19, 2019","TermsReviewSummary":"fblack Nov 21, 2018","Id":13716,"FundId":237146,"FundClassType":3,"CurrencyId":null,"PrimaryCurrencyName":null,"OtherCurrencyName":null,"ManagerStrategyId":null,"ManagerStrategyName":null,"SubVotingId":null,"SubVotingName":null,"SubHotIssueId":null,"SubHotIssueName":null,"RedsFrqncyId":5,"RedsFrqncyName":"Quarterly","RedsNoticeDays":46,"NoticeTypeOfDaysId":2,"NoticeTypeOfDaysName":"Calendar","LockupTypeId":5,"LockupTypeName":"No Lock","HardDurationMonthsId":null,"HardDurationMonthsName":null,"SoftDurationMonthsId":22,"SoftDurationMonthsName":"72","LockupFees0To12Pct":0,"LockupFees12To24Pct":0,"LockupFees24To36Pct":0,"WebfolioRedsFee":null,"LockupComments":"In the SOT, there is a 1-year lock, this is no longer applicable and was only applicable for the original transfer from Sylebra commingled.","ApplyGateDecliningBalance":false,"GateInvestorPct":0,"GateSourceId":null,"GateSourceName":null,"GateFundClassPct":0,"IntialProceeds":100,"PaymentInDays":30,"PaymentTypeOfDaysId":2,"PaymentTypeOfDaysName":"Calendar","HoldbackPercentage":0,"HoldbackPayment":null,"HoldbackTypeOfDaysId":null,"HoldbackTypeOfDaysName":null,"ManagementFeeRate":0,"IncentiveFeeRate":30,"RealizationFrequencyId":7,"RealizationFrequencyName":"Yearly","HighWaterMarkId":1,"HighWaterMarkName":"Standard","HurdleRate":false,"HurdleRateBasisId":null,"HurdleRateBasisName":null,"HurdleRatePct":null,"HurdleRateIndexId":null,"HurdleRateIndexName":null,"PreferredReturnRatePct":0,"GpCatchUp":null,"PreferredReturnComments":null,"Clawback":false,"ClawbackPercentage":null,"AssetFeeDiscountTypeId":1,"AssetFeeDiscountTypeName":"Management Fee","FeeComments":"New fees effective 1/1/2019 \n\nManagement fee is an Asset Based fee of the lesser of $1M or 1.5% of NAV.  This is a payment in advance of any performance fee, making the management fee effectively zero.\n\nIncentive fee is 30% on first 15% of performance, 35% thereafter.\n\nAudit holdbacks should be zero unless the vehicle is in liquidation, in which case it's typically a 5% holdback paid once the audit is completed where applicable or 2-3 months after the final NAV once all the expenses have been paid.","FeeReductionsNegotiated":null,"InvestmentStatusId":0,"LegalParentClassId":null},{"Description":"Class C","AuditSummary":"kweigand Feb 19, 2019","FeesReviewSummary":"kweigand Feb 19, 2019","TermsReviewSummary":"fblack Nov 21, 2018","Id":13715,"FundId":237146,"FundClassType":3,"CurrencyId":null,"PrimaryCurrencyName":null,"OtherCurrencyName":null,"ManagerStrategyId":null,"ManagerStrategyName":null,"SubVotingId":null,"SubVotingName":null,"SubHotIssueId":null,"SubHotIssueName":null,"RedsFrqncyId":5,"RedsFrqncyName":"Quarterly","RedsNoticeDays":46,"NoticeTypeOfDaysId":2,"NoticeTypeOfDaysName":"Calendar","LockupTypeId":5,"LockupTypeName":"No Lock","HardDurationMonthsId":null,"HardDurationMonthsName":null,"SoftDurationMonthsId":null,"SoftDurationMonthsName":null,"LockupFees0To12Pct":0,"LockupFees12To24Pct":0,"LockupFees24To36Pct":0,"WebfolioRedsFee":null,"LockupComments":"In the SOT, there is a 1-year lock, this is no longer applicable and was only applicable for the original transfer from Sylebra commingled.","ApplyGateDecliningBalance":false,"GateInvestorPct":0,"GateSourceId":null,"GateSourceName":null,"GateFundClassPct":0,"IntialProceeds":100,"PaymentInDays":30,"PaymentTypeOfDaysId":2,"PaymentTypeOfDaysName":"Calendar","HoldbackPercentage":0,"HoldbackPayment":null,"HoldbackTypeOfDaysId":null,"HoldbackTypeOfDaysName":null,"ManagementFeeRate":0,"IncentiveFeeRate":30,"RealizationFrequencyId":7,"RealizationFrequencyName":"Yearly","HighWaterMarkId":1,"HighWaterMarkName":"Standard","HurdleRate":false,"HurdleRateBasisId":null,"HurdleRateBasisName":null,"HurdleRatePct":null,"HurdleRateIndexId":null,"HurdleRateIndexName":null,"PreferredReturnRatePct":0,"GpCatchUp":null,"PreferredReturnComments":null,"Clawback":false,"ClawbackPercentage":null,"AssetFeeDiscountTypeId":1,"AssetFeeDiscountTypeName":"Management Fee","FeeComments":"New fees effective 1/1/2019 \n\nManagement fee is an Asset Based fee of the lesser of $1M or 1.5% of NAV.  This is a payment in advance of any performance fee, making the management fee effectively zero.\n\nIncentive fee is 30% on first 15% of performance, 35% thereafter.\n\nAudit holdbacks should be zero unless the vehicle is in liquidation, in which case it's typically a 5% holdback paid once the audit is completed where applicable or 2-3 months after the final NAV once all the expenses have been paid.","FeeReductionsNegotiated":null,"InvestmentStatusId":0,"LegalParentClassId":null},{"Description":"TestRanjit100","AuditSummary":"rmenon Jun 04, 2019","FeesReviewSummary":"","TermsReviewSummary":"","Id":28424,"FundId":237146,"FundClassType":3,"CurrencyId":2,"PrimaryCurrencyName":"USD","OtherCurrencyName":null,"ManagerStrategyId":null,"ManagerStrategyName":null,"SubVotingId":null,"SubVotingName":null,"SubHotIssueId":null,"SubHotIssueName":null,"RedsFrqncyId":null,"RedsFrqncyName":null,"RedsNoticeDays":null,"NoticeTypeOfDaysId":null,"NoticeTypeOfDaysName":null,"LockupTypeId":null,"LockupTypeName":null,"HardDurationMonthsId":null,"HardDurationMonthsName":null,"SoftDurationMonthsId":null,"SoftDurationMonthsName":null,"LockupFees0To12Pct":null,"LockupFees12To24Pct":null,"LockupFees24To36Pct":null,"WebfolioRedsFee":null,"LockupComments":null,"ApplyGateDecliningBalance":false,"GateInvestorPct":null,"GateSourceId":null,"GateSourceName":null,"GateFundClassPct":null,"IntialProceeds":null,"PaymentInDays":null,"PaymentTypeOfDaysId":null,"PaymentTypeOfDaysName":null,"HoldbackPercentage":null,"HoldbackPayment":null,"HoldbackTypeOfDaysId":null,"HoldbackTypeOfDaysName":null,"ManagementFeeRate":null,"IncentiveFeeRate":null,"RealizationFrequencyId":null,"RealizationFrequencyName":null,"HighWaterMarkId":null,"HighWaterMarkName":null,"HurdleRate":false,"HurdleRateBasisId":null,"HurdleRateBasisName":null,"HurdleRatePct":null,"HurdleRateIndexId":null,"HurdleRateIndexName":null,"PreferredReturnRatePct":null,"GpCatchUp":null,"PreferredReturnComments":null,"Clawback":false,"ClawbackPercentage":null,"AssetFeeDiscountTypeId":null,"AssetFeeDiscountTypeName":null,"FeeComments":null,"FeeReductionsNegotiated":null,"InvestmentStatusId":null,"LegalParentClassId":null}],"LegalFundClassSideLetterViewModel":[{"Description":"Class A","AuditSummary":"rmenon Jun 05, 2019","FeesReviewSummary":"dmukerji May 28, 2019","TermsReviewSummary":"kweigand Jan 16, 2019","Id":28443,"FundId":237146,"FundClassType":4,"CurrencyId":null,"PrimaryCurrencyName":null,"OtherCurrencyName":null,"ManagerStrategyId":null,"ManagerStrategyName":null,"SubVotingId":2,"SubVotingName":"Yes","SubHotIssueId":null,"SubHotIssueName":null,"RedsFrqncyId":5,"RedsFrqncyName":"Quarterly","RedsNoticeDays":46,"NoticeTypeOfDaysId":2,"NoticeTypeOfDaysName":"Calendar","LockupTypeId":5,"LockupTypeName":"No Lock","HardDurationMonthsId":null,"HardDurationMonthsName":null,"SoftDurationMonthsId":null,"SoftDurationMonthsName":null,"LockupFees0To12Pct":0,"LockupFees12To24Pct":0,"LockupFees24To36Pct":0,"WebfolioRedsFee":null,"LockupComments":"In the SOT, there is a 1-year lock, this is no longer applicable and was only applicable for the original transfer from Sylebra commingled.","ApplyGateDecliningBalance":false,"GateInvestorPct":0,"GateSourceId":null,"GateSourceName":null,"GateFundClassPct":0,"IntialProceeds":100,"PaymentInDays":30,"PaymentTypeOfDaysId":2,"PaymentTypeOfDaysName":"Calendar","HoldbackPercentage":0,"HoldbackPayment":null,"HoldbackTypeOfDaysId":null,"HoldbackTypeOfDaysName":null,"ManagementFeeRate":0,"IncentiveFeeRate":30,"RealizationFrequencyId":7,"RealizationFrequencyName":"Yearly","HighWaterMarkId":1,"HighWaterMarkName":"Standard","HurdleRate":false,"HurdleRateBasisId":null,"HurdleRateBasisName":null,"HurdleRatePct":null,"HurdleRateIndexId":null,"HurdleRateIndexName":null,"PreferredReturnRatePct":0,"GpCatchUp":null,"PreferredReturnComments":null,"Clawback":false,"ClawbackPercentage":null,"AssetFeeDiscountTypeId":1,"AssetFeeDiscountTypeName":"Management Fee","FeeComments":"New fees effective 1/1/2019 \n\nManagement fee is an Asset Based fee of the lesser of $1M or 1.5% of NAV.  This is a payment in advance of any performance fee, making the management fee effectively zero.\n\nIncentive fee is 30% on first 15% of performance, 35% thereafter.\n\nAudit holdbacks should be zero unless the vehicle is in liquidation, in which case it's typically a 5% holdback paid once the audit is completed where applicable or 2-3 months after the final NAV once all the expenses have been paid.","FeeReductionsNegotiated":null,"InvestmentStatusId":1,"LegalParentClassId":13713}],"Currencies":null,"LiqVoting":null,"LiqHotIssue":null,"LiqRedsFrequency":null,"LiqTypeOfDays":null,"LiqFrequencys":null,"LiqHighWaterMarks":null,"LiqHurdleRateBasis":null,"LiqHurdleRateIndex":null,"FeeDicountTypes":null,"ManagerStrategies":null,"FundClassType":null,"Funds":null,"FirmFunds":null}
  </code></pre>
  
  <p>UI</p>
  
  <pre><code>&lt;table class="fundClassesTable table-striped" border="1"&gt;
    &lt;tr *ngFor="let c of ColumnNames"&gt;
      &lt;th class="tableItem bold"&gt;{{ c }}&lt;/th&gt;
      &lt;ng-container *ngFor="let f of data"&gt;
           &lt;ng-container *ngFor="let s of data1;"&gt;
               &lt;ng-container *ngIf="f.Id == s.LegalParentClassId"&gt;  
        &lt;td class="tableItem" *ngIf="c == ColumnNames[0]"&gt;{{f.Description}}&lt;/td&gt;
        &lt;td class="tableItem" *ngIf="c == ColumnNames[1]"&gt;{{f.AuditSummary}}&lt;/td&gt;
        &lt;td class="tableItem" *ngIf="c == ColumnNames[2]"&gt;{{f.Id}}&lt;/td&gt;
      &lt;/ng-container&gt;
       &lt;/ng-container&gt; 
    &lt;/ng-container&gt;
  
    &lt;/tr&gt;
    &lt;/table&gt;
  </code></pre>