{"id":1319,"date":"2023-08-15T05:00:00","date_gmt":"2023-08-15T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1319"},"modified":"2023-08-14T15:28:16","modified_gmt":"2023-08-14T22:28:16","slug":"typescript-visibility-modifiers","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/typescript-visibility-modifiers\/","title":{"rendered":"Typescript visibility modifiers"},"content":{"rendered":"\n

Angular is mostly about Typescript classes, and Typescript classes have modifiers that alter the visibility of class members<\/a>: public<\/code>, protected<\/code>, private<\/code>, and readonly<\/code>. Here is what you need to know about them.<\/p>\n\n\n\n

Everything is public by default<\/strong><\/p>\n\n\n\n

If you don’t use a modifier on a class member, it is public by default. Any other class can see and use that member and change its value:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

private<\/code> means that the member isn’t visible outside of the class (including a component’s HTML template)<\/strong><\/p>\n\n\n\n

private<\/code> is a way to enforce that other classes cannot access a member of your class. Used in a component, this indicates that we do not want that property to be used in the component’s HTML template. In a service, this suggests that we don’t want other components\/services to see that member:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

protected<\/code> is in-between public<\/code> and private<\/code>. It makes the member accessible in a component’s template without making it fully public.<\/strong><\/p>\n\n\n\n

In the following example, our component property date is invisible from other Angular code in our app, but our HTML template can use it:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Best practice – My recommendation<\/strong><\/p>\n\n\n\n

If you want to stick to simple rules that make sense and are the safest, here’s what you can do:<\/p>\n\n\n\n

    \n
  1. Make every member private<\/code> by default<\/li>\n\n\n\n
  2. If the member is needed in the template of a component, make it protected<\/code><\/li>\n\n\n\n
  3. If the member is meant to be fully public, go with public<\/code><\/li>\n<\/ol>\n\n\n\n

    Tomorrow, I’ll add a couple more suggestions by introducing the readonly<\/code> modifier. Stay tuned!<\/p>\n","protected":false},"excerpt":{"rendered":"

    Angular is mostly about Typescript classes, and Typescript classes have modifiers that alter the visibility of class members: public, protected, private, and readonly. Here is what you need to know about them. Everything is public by default If you don’t use a modifier on a class member, it is public by default. Any other class […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,8,3],"tags":[],"class_list":["post-1319","post","type-post","status-publish","format-standard","hentry","category-angular","category-components","category-typescript"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t