-1

enter image description here

"lines": {
        "499": "            {",
        "500": "                var client = (ServiceClientBase)GetClientWithUserPassword();",
        "501": "                client.AlwaysSendBasicAuthHeader = true;",
        "611": "                ((ServiceClientBase)client).UserName = EmailBasedUsername;",
        "612": "                ((ServiceClientBase)client).Password = PasswordForEmailBasedAccount;",
        "613": "",
        "664": "                ((ServiceClientBase)client).UserName = EmailBasedUsername;",
        "665": "                ((ServiceClientBase)client).Password = PasswordForEmailBasedAccount;",
        "666": "",
        "713": "            {",
        "714": "                var client = (IRestClient)GetClientWithUserPassword();",
        "715": "                ((ServiceClientBase)client).AlwaysSendBasicAuthHeader = false;",
        "730": "            {",
        "731": "                var client = (IRestClient)GetClientWithUserPassword();",
        "732": "                ((ServiceClientBase)client).AlwaysSendBasicAuthHeader = true;"
      },

app.component.html:

<td class="text-wrap" style="min-width: 100px; max-width:300px;" 
  (click)="openDialog()"><span *ngFor="let line of getLinesArray(scan.lines);let 
  isLast=last">{{line}}{{isLast ? '' : ', '}}</span></td>

In this example i need to display only one line of data on table column and remaining i need to add click here(one line... click here to check) and if i click here then remaining lines should be displayed on mat dialog.

Thanks.

kian
  • 1,449
  • 2
  • 13
  • 21
Bhargavi
  • 1
  • 4

1 Answers1

0

for that you can use span I have used button here

copy.component.html

 <button
       id="copybutt"
       mat-menu-item
       (click)="classCodeDialog(classroom?.key)">
       Copy ClassCode // add your first data here{{ first data }}
 </button>

in above code in place of copy classcode you can read your first data there

below function will call dialouge

copy.component.ts

classCodeDialog(key): void{
    const dialogRef = this._matDialog.open(
      ClassroomCodeDialogComponent, {
        autoFocus: false,
        data: {
          key: key
        }
      }
    )
  }

dialouge.component.html

in place on data you can apply your data with using for loop

<div
    fxLayout="row"
    fxLayoutAlign="center"
    class="w-1/2 pb-4">

    <!-- HASHTAG -->
    <div
      fxLayout="row"
      fxLayoutAlign="space-between center"
      class="border-dashed rounded border-2 border-gray-600 px-1 pl-3">
      <ng-container *ngFor = your looped data>
         <p class="text-lg m-0 p-4">{{data}}</p>
    </div>
</div>

dialouge.component.ts

here as I injected data from another component but for you i will suggest to call data directly here through api or what you are using

constructor(
    @Inject(MAT_DIALOG_DATA) public _data: { key: string },
    private _copier: CopierService,
    private _snack : SnackbarService
  ) {}

  ngOnInit(): void {
  }

  copyKey(): void {
    this._copier.copyText(this.data.key);/ this line is for my project you have call you data here
  }
Vishal Pandey
  • 349
  • 1
  • 4
  • 15