Rendering Read-only Data with Angular

Jun 17, 2020 • 7 Minute Read

Introduction

When developing things like application forms or dashboards with grids, you may want to render some data in read-only mode to the end user. You can do this in two ways:

Use HTML label control
Use Angular's readonly property

HTML label control is read-only by default, but it doesn't look compelling in form and grid controls. So, it's better to use Angular's Out Of the Box (OOB) readonly property. In this guide, we will apply the readonly property through a real-world scenario. We will create a small form that will allow users to create technical events on any website (for example, Pluralsight.com).

To complete this guide, you must have the following:

Node - 12.17.0
Angular CLI - 9.0.2
Visual Studio Code - 1.45.1

Getting Started

Creating an Angular Project

Execute the following command to create an Angular project.

ng new readonly-demo

Opening the Generated Application in Visual Studio Code

Click on the File menu in the top menu bar and select the menu option Open Folder.
In the file dialog box, navigate to the folder where you generated the application.
In this folder, you should see a folder named readonly-demo. Select this folder and click Open in the file dialog box.

Setting up the Project

The next step is to install Twitter Bootstrap and jQuery and refer them in the project so you can use some of the form styles to make the form look good.

Go to the command prompt and run the following command:

cd readonly-demo

Run the following command to install jquery:

npm i jquery

Run the following command to install Bootstrap:

npm i bootstrap

In Visual Studio Code, open the file angular.json.
Add the following line in the styles array before src/style.css:

"node_modules/bootstrap/dist/css/bootstrap.min.css",

Add following lines in the scripts array:

"node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js"

Open the file src > app > app.module.ts, delete the existing content, and add the following code:

      import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
    ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
    

Now the project is all set to develop the form.

Developing the New Event Form

Run the following command in the command prompt:

ng generate component create-event

In Visual Studio Code, open the file src > app > create-event > create-event.component.ts , delete the contents of the file, and add following code:

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

@Component({
  selector: 'app-create-event',
  templateUrl: './create-event.component.html',
  styleUrls: ['./create-event.component.css']
})
export class CreateEventComponent implements OnInit {
  newEvent:any = {
    baseUrl: 'https://www.events.pluralsight.com/angular/'
  }

  constructor() { }

  ngOnInit(): void {
  }

  saveEvent(newEvent)
  {
    console.log(newEvent);
  }

  cancel()
  {

  }
}
    

In Visual Studio Code, open the file src > app > create-event > create-event.component.html, delete the contents of the file, and add following code:

      <h1>New Event</h1>
<hr>
<div class="col-md-6">
  <form #newEventForm="ngForm" (ngSubmit)="saveEvent(newEventForm.value)" autocomplete="off">
    <div class="form-group">
      <label for="eventName">Event Name:</label>
      <input [(ngModel)]="newEvent.name" name="name" id="name" type="text" class="form-control" placeholder="Name of your event..." />
    </div>
    <div class="form-group">
      <label for="eventDate">Event Date:</label>
      <input [(ngModel)]="newEvent.date" name="date" id="eventDate" type="text" class="form-control" placeholder="format (mm/dd/yyyy)..." />
    </div>
    <div class="form-group">
      <label for="eventTime">Event Time:</label>
      <input [(ngModel)]="newEvent.time" name="time" id="eventTime" type="text" class="form-control" placeholder="start and end time..." />
    </div>
    <div class="form-group">
      <label for="eventPrice">Event Price:</label>
      <input [(ngModel)]="newEvent.price" name="price" id="eventPrice" type="text" type="number" class="form-control" placeholder="event price..." />
    </div>
    <div class="form-group" style="overflow: hidden;">
      <label style="display: block;" for="onlineUrl">Online Url:</label>
      <div style="float: left; width: 49%;">
        <input type="text" [(ngModel)]="newEvent.baseUrl" name="baseUrl" id="baseUrl" class="form-control" placeholder="Base Url..."/>
      </div>
      <div style="float:right; width: 49%;">
        <input [(ngModel)]="newEvent.onlineUrl" name="onlineUrl" id="onlineUrl" type="text" class="form-control" placeholder="Event Url..." />
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
    <button type="button" [disabled]="newEventForm.invalid" class="btn btn-default" (click)="cancel()">Cancel</button>
  </form>
</div>
    

In Visual Studio Code, open the file src > app > app.component.html, delete all the existing code, and add the following code:

      <app-create-event></app-create-event>

Launching the Development Server

Run the following command in the command prompt to start the Angular Development Server in watch mode: ng serve
If prompted to share Angular CLI usage data, press the 'N' key to not share it.
Open a browser and type the following URL in the address bar to launch the application: https://localhost:4200.
Notice the Online URL field. The first text box is writable, and it should be rendered as read-only so users are not able to edit the base URL of the event. So let's do that.

Making the Base URL Read-Only

In Visual Studio Code, open the file src > app > create-event > create-event.component.html.
Go to line 24, and at the end of the element add the following code: [readonly]="true"

The final code should look like below:

<input type="text" [(ngModel)]="newEvent.baseUrl" name="baseUrl" id="baseUrl" class="form-control" placeholder="Base Url..." [readonly]="true"/>

Go back to the application in the browser and observe that the base URL field is now read-only. Users cannot make any changes to it.

Conclusion

Congratulations!! You have learned:

How to render read-only data to end users in Angular
How to use Angular's property binding syntax to bind the HTML property of the input element

For more information, please refer to the following resources: