Hello, I'm working on a page to allow the people to add student name in the textbox and display the name on the table. people can add up to 7 names. I store in array and display but the problem is when I click add without put name it creates empty row. If I click twice the add button without putting names, It will create two empty rows. I want if the user doesn't put names, it shouldn't creates empty rows.

NOTE:******Typescript and it not Java Script*******

//This is my code

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

@Component({ selector: 'app-names', template: `

Student Names

Student name

{{name}}

`, styles: [] }) export class NamesComponent implements OnInit { studentNames: string[] = []; newName = ''; maxLength = 7;

ngOnInit(): void {

}

addName() { if (this.studentNames.length

\begin{tabular}{|l||l||} \hline \hline Student name & \\ \hline \hline \hline \hline & Remove \\ \hline \hline & || Remove \\ \hline \end{tabular}