What is the use of restrict and template property when creating custom directives?

Custom directives gives us the ability to create our own directives. Its restriction property helps us to enforce the decision of how this custom directive should be used. The restriction property takes four values as input:

• E- If E is the value for the restriction property, the directive can only be used as an element in an html page,
• A- If A is used as a value, the directive can be used as an attribute in any html tag,
• C-If C is used, the directive gets triggered if same CSS class is used,
• M-If M is used, the directive gets triggered if same comment is used.

These four values can also be combined and used, for example : ‘EA’ if provided as a value will allow the directive to be used as an element as well as an attribute. ‘EAC’ can also be set as a value for restrict. “template” property is used in a directive if you have to inject a template in your html page.”template” property takes an html template as an input. The main objective of this property is to reduce the re-work involved in writing same code again and again.