Each component handles a small part of UI. The Angular applications will have lots of components. The Component can also get notified when the View Changes. The Angular does this by using data binding to get the data from the Component to the View. This is done using the special HTML markup knows as the Angular Template Syntax. The Component is responsible to provide the data to the view. This Decorator provides the component with the View to display & Metadata about the Component The Angular Components are plain JavaScript classes and defined using Decorator.

A view in Angular refers to a template (HTML). The Component contains the data & user interaction logic that defines how the View looks and behaves. The Component is the main building block of an Angular Application.

Creating the inline Template & StyleUrls.Register the Angular Component in Angular Module Important Component metadata properties.Building blocks of the Angular Components.Let's create a simple directive that compiles the string above. So instead of using ngSanitize, we'll use $compile. If we use ngSanitize, it will render the HTML, but it won't bind the click event. This will output the exact string in the HTML. So lets say that we have the following string: $scope.htmlString = ' ' So what is this compile service? According to the Angular docs:Ĭompiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together. If the string contains HTML that you want to parse, you can use ngSanitize.īut what if your HTML string contains a button that has an ng-click directive included in it? This won't work automatically, you'll need to use $compile.

No real problem, you just use expressions or ngBind. Say you want to bind a string to an element in Angular.

Angular html compiler