how to make a read only DIV in angular?

Issue

How to make all clickables inside a div read only ? for example in the html below those divs are like buttons and I want to make it all read only , is there a shorcut to do so ? Thanks.

#html

   <ng-container>
        <div fxLayoutAlign="space-around center" style="padding-right: 0px;" (click)="download1()">
            Download
            <span class="material-icons inspection-file-actions-font">
                print
            </span>
        </div>
        <div fxLayoutAlign="space-around center" (click)="upload()">
            Upload
            <span class="material-icons inspection-file-actions-font">
                file_upload
            </span>
        </div>
    </ng-container>

Solution

There are few ways:

stopPropagation:

Html:
<div (click)=noEvent($event)></div>

component.ts:
noEvent(event) { event.stopPropagation() }

CSS:

html:

<div class="no-event"></div>

scss:

.no-event {
  cursor: not-allowed; // optional
  pointer-events: none;
}

Answered By - Nehal