{"id":393,"date":"2023-11-04T16:39:10","date_gmt":"2023-11-04T16:39:10","guid":{"rendered":"https:\/\/devopsopen.com\/?p=393"},"modified":"2023-11-04T16:48:34","modified_gmt":"2023-11-04T16:48:34","slug":"angular-binding","status":"publish","type":"post","link":"https:\/\/devopsopen.com\/index.php\/2023\/11\/04\/angular-binding\/","title":{"rendered":"Angular Binding"},"content":{"rendered":"<h2>Interpolation<\/h2>\n<p>le contr\u00f4leur<\/p>\n<pre><code>import { Component } from &#039;@angular\/core&#039;;\nimport { FormGroup, FormControl } from &#039;@angular\/forms&#039;;\n\n@Component({\n  selector: &#039;app-profile-editor&#039;,\n  templateUrl: &#039;.\/profile-editor.component.html&#039;,\n  styleUrls: [&#039;.\/profile-editor.component.css&#039;]\n})\nexport class AppComponent {\nprivate who: string = &quot;there&quot;\n}<\/code><\/pre>\n<p>la vue<\/p>\n<pre><code>&lt;h2&gt;data binding interpolation&lt;\/h2&gt;\n&lt;label&gt;  {{who}}&lt;\/label&gt;<\/code><\/pre>\n<h2>Property binding<\/h2>\n<p>Si la variable \u00e0 interpoler dans le template est la valeur d'un attribut d'une balise HTML, vous avez deux possibilit\u00e9, l'interpollation ou d\u00e9l\u00e9guer \u00e0 Angular la gestion de cet attribut (l'attribut html devient une directive attribut)<\/p>\n<p>le contr\u00f4leur<\/p>\n<pre><code>import { Component } from &#039;@angular\/core&#039;;\nimport { FormGroup, FormControl } from &#039;@angular\/forms&#039;;\n\n@Component({\n  selector: &#039;app-profile-editor&#039;,\n  templateUrl: &#039;.\/profile-editor.component.html&#039;,\n  styleUrls: [&#039;.\/profile-editor.component.css&#039;]\n})\nexport class AppComponent {\nprivate imgSrc: string = &quot;assets\/angular-js.png&quot;\n}<\/code><\/pre>\n<p>la vue<\/p>\n<pre><code>&lt;img [src]=&quot;imageSrc&quot; \/&gt;  au lieu de &lt;img src={{imageSrc}} \/&gt;<\/code><\/pre>\n<h2>Event binding<\/h2>\n<ul>\n<li>Attribuer une ref \u00e0 l'\u00e9l\u00e9ment du DOM (ici #imageRef)<\/li>\n<li>Passer cette r\u00e9f\u00e9rence \u00e0 la m\u00e9thode changeImage() du composant qui est appel\u00e9e sur l'\u00e9v\u00e9nement clic<\/li>\n<\/ul>\n<p>le contr\u00f4leur<\/p>\n<pre><code>import { Component } from &#039;@angular\/core&#039;;\nimport { FormGroup, FormControl } from &#039;@angular\/forms&#039;;\n\n@Component({\n  selector: &#039;app-profile-editor&#039;,\n  templateUrl: &#039;.\/profile-editor.component.html&#039;,\n  styleUrls: [&#039;.\/profile-editor.component.css&#039;]\n})\nexport class AppComponent {\nprivate imgSrc: string = &quot;assets\/angular-js.png&quot;;\nchangeImage(imageRef :any){\nimageRef.src= &quot;assets\/Angular.png&quot;;\n}\n\n}<\/code><\/pre>\n<p>la vue<\/p>\n<pre><code>&lt;img #imageRef [src]=&quot;imageSrc&quot; (click)=&quot;changeImage(imageRef)&quot; \/&gt;  au lieu de &lt;img src={{imageSrc}} \/&gt;<\/code><\/pre>\n<h2>Two-way data binding<\/h2>\n<p>le contr\u00f4leur<\/p>\n<pre><code>import { Component } from &#039;@angular\/core&#039;;\nimport { FormGroup, FormControl } from &#039;@angular\/forms&#039;;\n\n@Component({\n  selector: &#039;app-profile-editor&#039;,\n  templateUrl: &#039;.\/profile-editor.component.html&#039;,\n  styleUrls: [&#039;.\/profile-editor.component.css&#039;]\n})\nexport class AppComponent {\n}<\/code><\/pre>\n<p>la vue<\/p>\n<pre><code>&lt;input [(ngModel)]=&quot;value&quot;&gt;\n&lt;p&gt;{{value}}&lt;\/p&gt;<\/code><\/pre>\n<h2>Formulaires<\/h2>\n<p>Privil\u00e9giez les Reactive Forms du Template-Driven<br \/>\n<a href=\"https:\/\/blog.angular-university.io\/introduction-to-angular-2-forms-template-driven-vs-model-driven\/#summary\">https:\/\/blog.angular-university.io\/introduction-to-angular-2-forms-template-driven-vs-model-driven\/#summary<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Interpolation le contr\u00f4leur import { Component } from &#039;@angular\/core&#039;; import { FormGroup, FormControl } from &#039;@angular\/forms&#039;; @Component({ selector: &#039;app-profile-editor&#039;, templateUrl: &#039;.\/profile-editor.component.html&#039;, styleUrls: [&#039;.\/profile-editor.component.css&#039;] }) export class AppComponent { private who: string = &quot;there&quot; } la vue &lt;h2&gt;data binding interpolation&lt;\/h2&gt; &lt;label&gt; {{who}}&lt;\/label&gt; Property binding Si la variable \u00e0 interpoler dans le template est la valeur d&#8217;un attribut d&#8217;une balise HTML, vous avez deux possibilit\u00e9, l&#8217;interpollation ou d\u00e9l\u00e9guer \u00e0 Angular la gestion de cet attribut (l&#8217;attribut html devient une directive attribut) le contr\u00f4leur import { Component } from &#039;@angular\/core&#039;; import { FormGroup, FormControl } from &#039;@angular\/forms&#039;; @Component({ selector: &#039;app-profile-editor&#039;, templateUrl: &#039;.\/profile-editor.component.html&#039;, styleUrls:\u2026<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":""},"categories":[9],"tags":[],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":5}},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"admin","author_link":"https:\/\/devopsopen.com\/index.php\/author\/admin_bak\/"},"uagb_comment_info":7,"uagb_excerpt":"Interpolation le contr\u00f4leur import { Component } from &#039;@angular\/core&#039;; import { FormGroup, FormControl } from &#039;@angular\/forms&#039;; @Component({ selector: &#039;app-profile-editor&#039;, templateUrl: &#039;.\/profile-editor.component.html&#039;, styleUrls: [&#039;.\/profile-editor.component.css&#039;] }) export class AppComponent { private who: string = &quot;there&quot; } la vue &lt;h2&gt;data binding interpolation&lt;\/h2&gt; &lt;label&gt; {{who}}&lt;\/label&gt; Property binding Si la variable \u00e0 interpoler dans le template est la valeur d'un&hellip;","_links":{"self":[{"href":"https:\/\/devopsopen.com\/index.php\/wp-json\/wp\/v2\/posts\/393"}],"collection":[{"href":"https:\/\/devopsopen.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devopsopen.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devopsopen.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devopsopen.com\/index.php\/wp-json\/wp\/v2\/comments?post=393"}],"version-history":[{"count":2,"href":"https:\/\/devopsopen.com\/index.php\/wp-json\/wp\/v2\/posts\/393\/revisions"}],"predecessor-version":[{"id":395,"href":"https:\/\/devopsopen.com\/index.php\/wp-json\/wp\/v2\/posts\/393\/revisions\/395"}],"wp:attachment":[{"href":"https:\/\/devopsopen.com\/index.php\/wp-json\/wp\/v2\/media?parent=393"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devopsopen.com\/index.php\/wp-json\/wp\/v2\/categories?post=393"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devopsopen.com\/index.php\/wp-json\/wp\/v2\/tags?post=393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}