Skip to main content

Maintaining Multi-line text format in Angular

In my earlier post, I had discussed about maintaining multi-line text format in AngularJS view. In this post, I'll share how to achieve the same in Angular. What I have described in this post is tested in Angular 7.

To provide a context, let us say you are creating a page using Angular and rendering data from a SharePoint list/library. One of the columns is multiple lines of text with rich text enabled. The objective is to display the rich text as it is.

In AngularJS, we created a custom filter and used that filter in the HTML element.

In Angular, it is pretty easy. Angular already provides [innerHTML] property to handle such cases. Let's look at an example.

<p [innerHTML]="description"></p>

Here, "description" is a property in Angular component which holds the value of a multi-line text column.

If you are thinking if it is safe to use this, check the Angular documentation on security (yes, it is safe!)

Comments

Popular posts from this blog

Document ID Service - New Feature in SharePoint

When I explored this new feature of SharePoint in Online (this feature is available in SharePoint 2013 also), I found it interesting because it solved one of the common problems people faced in SharePoint. I will first explain about this feature and I'll cover the problem and the solution in another post. This feature allows Site Collection Admin assign a unique ID to every document in the site collection out of the box. If you recall, there was no out of the box way to assign a unique number to the documents across libraries in a site collection. Yes ID column is unique but only within a library. Document ID column contains a number which is unique across libraries. To start with, let's have a look at a typical document library. This is a familiar view for SP guys. By default, you don't get Document ID column in a library. All Items View To get Document ID column, you need to activate a site collection feature "Document ID Service" as shown below. S...

How to update Person field with multiple values using REST API

Person or Group field in SharePoint is similar to a Lookup field. When you are updating this field using REST API, you need to append "Id" to the name of the column in the body construct. For example, the body construct looks like this: data: { "__metadata": { "type": "SP.Data. ListName ListItem" }, "Title": "First Item", " PeopleField Id": "4" }; The highlighted portions should be replaced by the actual List Name and Column Name. In the above example, the REST call is updating a List item with Title and People columns. How to get the value for user ID ("4" in the above example) needs a separate explanation and that will be my next post! The above example works fine if Person field is configured to accept only one value. If we change the Person field to accept multiple values, how do we pass more than one value in the REST call? Since we normally separate user names with semicolon in peop...

Restrict Future or Past Date in List

Many a times you will come across a requirement wherein you need to restrict user from entering future or past date in a List or Document Library Date column. Developers are inclined towards writing either event handler or javascript to achieve this. But, hold on! You can achieve this without writing a single line of code. I have a list which stores Employee details like Employee Number, Name and Date of Joining. Here I need to enure that Date of Joining will not accept future date. Navigate to List Settings -> Validation Settings. Here you can enter the formula to restrict future date as shown below. If you change the logical operator, it will restrict past date. Also, you can put message which will be displayed to user. Now, when you try to enter future date and try Save, you will see the validation message. So, next time you have similar requirement, you know where to try first before jumping into coding!