Can Angular Bind Templates And Scripts

Author avatar

Belongings Bounden in Angular

Yallaling Goudar

Introduction

Property binding is a technique, which volition help to bind values to the backdrop of HTML elements.

Allow'due south consider an example where we are binding the value holding of the input element to a component's myText property.

File Name: example.component.ts

                                      1                    import                                                            {                                                            Component                                                            }                                                            from                                                            "@angular/cadre"                    ;                                                            2                                        @                    Component                    (                    {                                                            3                                          selector                    :                                                            'app-example'                    ,                                                            iv                                          template                    :                                                            `                                                                                  5                      <div>                                                              6                      <input [value]='myText'></span>                                                              7                      </div>                                        8                                                            `                                                            nine                                        }                    )                                                            ten                                        export                                                            class                                                            AppComponent                                                            {                                                            11                                          myText                    :                                                            string                                                            =                                                            "Hi World"                    ;                                                            12                                        }

typeScript

Let's consider some other example where we are binding the disabled property of the push button element to a component's isDisabled property. This will disable the button based on the condition either it's true or false.

                                      1                    import                                                            {                                                            Component                                                            }                                                            from                                                            "@athwart/core"                    ;                                                            two                                        @                    Component                    (                    {                                                            iii                                          selector                    :                                                            'app-example'                    ,                                                            iv                                          template                    :                                                            `                                                                                  5                      <div>                                                              vi                      <push [disabled] = "isDisabled">Button disabled!</push>                                                              7                      </div>                                        8                                                            `                                                            9                                        }                    )                                                            x                                        export                                                            class                                                            AppComponent                                                            {                                                            11                                          isDisabled                    :                                                            boolean                                                            =                                                            true                    ;                                                            12                                        }

typeScript

Allow's explore another case of setting the property of an Angular directive. In this case, we are setting the Angular directive ngClass belongings to a component's myClass property. Based on different conditions, information technology can add or remove a class

                                      one                    <                    div                                                            [ngClass]                    =                    "                    myClass                    "                    >                    Binding ngClass to the myClass holding                    </                    div                    >

html

I-fashion Data Binding Using Holding Bounden

One-way data binding volition bind the data from component to the view (DOM) or from view to the component using property binding. One-mode data binding is unidirectional. Information technology flows a value in 1 direction, from a component's information property into a target element holding.

Why Use Belongings Binding?

The post-obit are couple of the nigh useful reasons why we should use property binding.

Property binding helps y'all to bind the values to the target property of the element belongings enclosed within the square brackets.

Allow'due south consider an case where we are binding the value "How-do-you-do World!" to the span element's innerHTML property. In this case, the target property is innerHTML.

                                      1                    <                    span                                                            [innerHTML]                    =                    '                    Howdy Earth!                    '                    >                    </                    span                    >

html

We can also use the alternative approved form 'bind-prefix' to demark the property.

                                      1                    <                    bridge                                                            bind-innerHTML                    =                    '                    How-do-you-do Earth!                    '                    >                    </                    bridge                    >

html

When we are bounden an element property to a not-string data value, nosotros use property bounden. So that there will not exist any change in the type of object nosotros are binding to the view and the value that we have passed from the component. For easy readability, we can employ the interpolation technique.

What to Avert During Property Binding

The following are some of the things to avert while using property binding.

When we are binding a method or part to holding binding, that method may change a value in the component. Angular may or may not display the inverse value. It may detect the change, but will throw a warning error.

When using holding binding, brand certain that your displayed values lucifer.

The value inside the template expression should evaluate to the type of value expected by the target belongings. Let's say the target holding expects a number, then the number should be returned. If the target holding expects a string, then cord should be returned. If the target property expects an object, and then the object should exist returned.

Permit's consider an example of ExampleComponent. Hither the person holding of the AppExample component expects an object of type person needs to exist bound to it.

                                      1                    export                                                            class                                                            Person                    {                                                            2                                          name                    :                                                            string                    ;                                                            three                                          address                    :                                                            string                    ;                                                            4                                        }

typescript

File Name: app.component.ts

                                      ane                    import                                                            {                                                            Component                                                            }                                                            from                                                            "@angular/core"                    ;                                                            2                                        import                                                            {                                                            Person                                                            }                                                            from                                                            '../person'                    ;                                                            3                    4                                        @                    Component                    (                    {                                                            5                                          selector                    :                                                            'app-root'                    ,                                                            six                                          template                    :                                                            `                                                                                  7                      <div>                                                              8                      <app-example [person]="personName"></app-example>                                                              9                      </div>                                        10                                                            `                                                            xi                                        }                    )                                                            12                                        export                                                            form                                                            AppComponent                                                            {                                                            13                                          personName                    :                                                            Person                    ;                                                            14                                        }

typeScript

Don't forget to put brackets effectually the property during property binding. Brackets volition tell Angular to evaluate the template expression. If you forget to utilise brackets, then Angular will treat the string as a constant and initialize the target property with that string. Information technology will not evaluate the string.

Let'southward consider an example: If we don't use brackets during holding binding, so we volition get an error "person expects a Person object, not the string personName".

                                      1                    <                    app-case                                                            person                    =                    "                    personName                    "                    >                    </                    app-case                    >

html

You can omit the brackets when all of the post-obit atmospheric condition meet:

The target belongings accepts a string value.

The cord is a fixed value.

The initial value never changes.

Permit's consider an example, where we are initializing the value property of the ExampleComponent to a cord "Hello World!", not a template expression. Angular sets this fixed string value simply once and forgets about it.

                                      1                    <                    app-example                                                            value                                                            =                                                            "                    Hello Globe!                    "                    >                    </                    app-example                    >

html

Whenever we are bounden element holding to a non-string value, and then we must use holding binding. Otherwise, Angular will non be able to identify the type of data value that nosotros are trying to bind to the DOM.

Angular will non allow the script tags to be placed in the HTML. It may pb to the leaks into the HTML and can cause a security issue. Both property binding and interpolation are not allowed within the HTML.

Let'southward consider an instance, where nosotros are a bounden value from component to the view containing the script tag as shown below.

File Name: instance.component.ts

                                      1                    import                                                            {                                                            Component                                                            }                                                            from                                                            "@athwart/cadre"                    ;                                                            2                    3                                        @                    Component                    (                    {                                                            4                                          selector                    :                                                            'app-example'                    ,                                                            v                                          template                    :                                                            `                                                                                  6                      <div>                                                              7                      <<span [innerHTML]="scriptText"></span>                                                              8                      </div>                                        nine                                                            `                                                            10                                        }                    )                                                            11                                        consign                                                            class                                                            ExampleComponent                                                            {                                                            12                                          scriptText                                        =                                                            'Template <script>alert("Text with script tag!")</script>Syntax'                    ;                                                            thirteen                                        }

typeScript

Athwart volition sanitize the values before rendering them to the view. In the above instance, Athwart will throw a alarm "sanitizing HTML stripped some content".

Conclusion

In this guide, nosotros have explored the holding binding technique of the Angular. Nosotros have as well seen why we should use property bounden and what we should avert during holding binding.