{"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":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1319","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1319"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1319\/revisions"}],"predecessor-version":[{"id":1328,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1319\/revisions\/1328"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1319"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1319"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}