How To Add Star Pattern In Angular

The patterns provide a prevalent vocabulary for software designers to speak about.There are too many different types of patterns.Let’s discuss star Patterns in Angular in detail.

 app.component.ts :

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  
    string: any;
     ngOnInit(): void {
    this.string = ""
    for (var i = 1; i <= 9; i++) {
      for (var j = 1; j <= 9; j++) {
        if ((j <= 6 - i || j >= 4 + i || j <= i - 4 || j >= 14 - i)) {
          this.string += "<span class='value' style='display: inline-block; width: 26px !important;'>&nbsp;&nbsp;&nbsp;*&nbsp;&nbsp;&nbsp;</span>";
        } else {
          this.string += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
        }
      }
      this.string += "</br>"
    }
    let string = <HTMLElement>document.getElementById('string');
    string.innerHTML = this.string;
  }
  }

app.component.html :

<h4>Star Pattern</h4>
<p [innerHTML]="string"></p>

npm start : 

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories