I want to understand the internal working of @Input property's rendering.
If I define a component in Angular, where type and title are @Input properties, how does the component understand that type property's value is string (to be considered as-is) and title property's value is to be fetched from config file's component_title variable?
<my-component #comp [type]='CONFIRMATION' [title]='config.component_title'></my-component>
If you use foo="bar", then bar is considered as a string. The string "bar" is thus passed as the value for the input foo.
If you use [foo]="bar", then bar is considered as an angular expression. The value of the expression bar (so, in this case, the value of the property bar of the component) is thus passed as the value for the input foo.
From these two rules, you can thus deduce that foo="bar" is equivalent to [foo]="'bar'".
[type] = "'CONFIRMATION'" is used for string. (See the quotes)
read this to find some solution for you
https://toddmotto.com/passing-data-angular-2-components-input
CONFIRMATIONin[type]='CONFIRMATION'is string, it will refer tothis.CONFIRMATION[type]="'CONFIRMATION'"in order to pass a string along