How To Add Dynamic Star Pattern In Angular

The patterns provide a prevalent vocabulary for software designers to speak about. There are too many different types of patterns.For dynamic pattern follow below code in angular,

In app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  patterns: any;
  pattern: any;

  ngOninit() {
    this.show()
  }
  show() {
    this.pattern = '';
    for (var i = 1; i < this.patterns; i++) {
      for (var j = i; j <= this.patterns; j++) {
        this.pattern += '*' + "&nbsp;";
      }
      for (var k = 1; k < (i * 2) - 1; k++) {
        this.pattern += "&nbsp;&nbsp;&nbsp";
      }
      for (j = i; j <= this.patterns; j++) {
        this.pattern += '*' + "&nbsp;";
      }
      for (k = 1; k < i * 2; k++) {
        this.pattern += "&nbsp;&nbsp;&nbsp";
      }
      this.pattern += '<br>';
    }
    for (i = this.patterns - 1; i >= 1; i--) {
      for (j = this.patterns; j >= i; j--) {
        this.pattern += '*' + "&nbsp;";
      }
      for (k = 1; k < (i * 2) - 1; k++) {
        this.pattern += "&nbsp;&nbsp;&nbsp";
      }
      for (j = this.patterns; j >= i; j--) {
        this.pattern += '*' + "&nbsp;";
      }
      for (k = 1; k < i * 2; k++) {
        this.pattern += "&nbsp;&nbsp;&nbsp";
      }
      this.pattern += '<br>';
    }
  }
}

In app.component.html

<div>
    <h3>Dynamic Star Pattern</h3>
    <input type="text" id="patterns" name="patterns" [(ngModel)]="patterns  ">
    <button (click)="show()">Go</button>
    <p [innerHtml]="pattern"></p>
</div>

Output