{"flag":true,"single":true,"pageTitle":"Angular Cheatsheet","post":{"id":98,"user_id":"1","slug":"angular-cheatsheet-gxxt","title":"Angular Cheatsheet","body":"

1.Button click<\/p>\r\n<\/colgroup>\r\n\r\n\r\n
\r\n
 <button\r\n  type=\"button\"\r\n  [disabled]=\"canClick\"\r\n  (click)=\"sayMessage()\">\r\n  Trigger alert message\r\n<\/button><\/code><\/pre>\r\n<\/td>\r\n
\r\n
canClick = false;\r\nmessage = 'Hello, World';\r\nsayMessage() {\r\nalert(this.message);\r\n}<\/code><\/pre>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n
2.Pass variable to view<\/p>\r\n<\/colgroup>\r\n\r\n\r\n
\r\n
<p>My color is {{ fontColor }}<\/p><\/code><\/pre>\r\n<\/td>\r\n
\r\n
fontColor = 'blue';<\/code><\/pre>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n
3. style add<\/p>\r\n<\/colgroup>\r\n\r\n\r\n
\r\n
<p\r\n  [id]=\"sayHelloId\"\r\n  [style.color]=\"fontColor\">\r\n  You can set my color in the component!\r\n<\/p><\/code><\/pre>\r\n<\/td>\r\n
\r\n
fontColor = 'blue';\r\nsayHelloId = 1;<\/code><\/pre>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n
4.IF else<\/p>\r\n<\/colgroup>\r\n\r\n\r\n
\r\n
<div *ngIf=\"canEdit; else noEdit\">\r\n    <p [contentEditable]=\"canEdit\">{{ message }}<\/p>\r\n<\/div>\r\n<ng-template #noEdit>\r\n    <p>The following paragraph is read only.<\/p>\r\n<\/ng-template>\r\n\r\n<\/code><\/pre>\r\n<\/td>\r\n
\r\n
export class ParentComponent {\r\n  message = \"I'm read only!\";\r\n  canEdit = true;\r\n  constructor() {\r\n    if (this.canEdit) {\r\n      this.message = 'You can edit me!';\r\n    } else {\r\n      this.message = \"I'm read only!\";\r\n    }\r\n  }\r\n}<\/code><\/pre>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n
if canEdit=true, show <p><\/p> that is editable, else load noEdit Template<\/p>\r\n
 <\/p>","category_id":"13","is_private":"0","created_at":"2023-04-03T00:01:13.000000Z","updated_at":"2023-04-03T00:01:13.000000Z","category":{"id":13,"user_id":"1","name":"Angular","slug":"angular-rfjp","parent_id":"12","created_at":"2023-03-24T03:25:15.000000Z","updated_at":"2023-03-24T03:25:15.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"1.Button click      <button   type=\"button\"   [disabled]=\"canClick\"   (click)=\"sayMessage()\">   Trigger alert message <\/button>  - Angular Cheatsheet (Updated: April 3, 2023) - Read more about Angular Cheatsheet at my programming site [SITE]","categories":[]}