SPA Angular [Title] component mapping

[mrobinson]

I am attempted to map the Title component in an SPA, but was curious how others were able to map the "type" property to the title.component.html file.

title.component.ts

import { Component, Input, OnInit } from '@angular/core';
import {MapTo} from '@adobe/cq-angular-editable-components';

@Component({
  selector: 'app-title',
  templateUrl: './title.component.html',
  styleUrls: ['./title.component.css']
})
export class TitleComponent implements OnInit {
  @Input() type: string;
  @Input() text: string;

  constructor() { }
  
  get hasTitle() {
    return this.text && this.text.trim().length > 0;
  }

  ngOnInit() {  }
}
const TitleEditConfig = {
  emptyLabel: 'Title',
 
  isEmpty: function(componentData) {
    return !componentData || !componentData.text || componentData.text.trim().length < 1;
  }
};

MapTo('angularapp/components/title')(TitleComponent, TitleEditConfig);

title.component.html

<ng-container *ngIf="hasTitle">
 <{{type value}}> {{text value}} </{{type value}}>
</ng-container>

Has anyone achieved this?

Thanks!