Using ng-href doesn't use interpolated values, while the value can be used in plain text

Question

I'm aiming to have various cards of different users referencing a model that I've created within the typescript file. I'm able to fetch the image, and the name, but there's trouble with having it read within the tags.
HTML:

<div *ngFor='let person of people' class="card">
        <div class="imgBx">
        <img src="{{person.image}}"> <!-- This gets the image properly -->
        </div>  
        <div *ngFor='let social of person.socials' class="contentBx">
            <a ng-href="https://twitch.tv/{{person.username}}" target="_blank"><h2>{{person.username}}</h2></a> <!-- This gets username fine -->
        <div class="color">
          <span><a ng-href="https://twitch.tv/{{social.twitch}}" target="_blank"><svg img"></svg></a></span> <!-- This is where the link doesn't work -->
          <span><a ng-href="https://twitter.com/{{person.username}}" target="_blank"><svg img></svg></a></span> <!-- also tried approaching it differently and didn't work still -->
          <span> {{social.twitter}} </span> <!-- Meanwhile this fetches the variable just fine -->
          <h1><a ng-href="https://twitch.tv/{{social.twitch}}">{{social.twitch}}</a></h1>
        </div>
        </div>
</div>

Example of person object in .ts

people: any[] =[
    {
      username: 'userName',
      image: 'link to image url',
      socials: [
        { twitch: 'userTwitch'},
        { twitter: 'userTwitter'},
        { instagram: 'userInstagram'}
      ]
    },

Answer 1

Your mixing angular1 ng-href with angular 2 code which is wrong.

The equivalent of ng-href is href tag with property binding like [href] using this javascript expression can be written inside

ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  people: any[] = [
    {
      username: 'userName',
      image: 'link to image url',
      socials: [
        { twitch: 'userTwitch' },
        { twitter: 'userTwitter' },
        { instagram: 'userInstagram' },
      ],
    },
  ];
}

html

<div *ngFor="let person of people" class="card">
  <div class="imgBx">
    <img src="{{ person.image }}" />
    <!-- This gets the image properly -->
  </div>
  <div *ngFor="let social of person.socials" class="contentBx">
    <a [href]="'https://twitch.tv/' + person.username" target="_blank"
      ><h2>{{ person.username }}</h2></a
    >
    <!-- This gets username fine -->
    <div class="color">
      <span
        ><a [href]="'https://twitch.tv/' + social.twitch" target="_blank"
          ><svg img></svg></a
      ></span>
      <!-- This is where the link doesn't work -->
      <span
        ><a [href]="'https://twitter.com/' + person.username" target="_blank"
          ><svg img></svg></a
      ></span>
      <!-- also tried approaching it differently and didn't work still -->
      <span> {{ social.twitter }} </span>
      <!-- Meanwhile this fetches the variable just fine -->
      <h1>
        <a [href]="'https://twitch.tv/' + social.twitch">{{ social.twitch }}</a>
      </h1>
    </div>
  </div>
</div>

forked stackblitz