Basic custom component


I’m looking to build a basic custom component that takes a number and prints ‘X’ instead. Like I have a simple function that converts a given number 2 to the corresponding string ‘XX’ and displays ‘XX’ on the web page.

import { Component } from ‘@angular/core’;

selector: ‘cross’,
templateUrl: ‘{{numberToCross}}’ <- would return string
export class Cross {
constructor() {

// do the actual transformation … but how do I access the number value?
return result;

and using it <cross [value]=3> or whatever is best to access another input value

Any thoughts? I had a look at some web pages showing custom component creating but got lost rather quickly by the complexity.