{"id":17,"date":"2020-11-05T20:08:16","date_gmt":"2020-11-05T20:08:16","guid":{"rendered":"https:\/\/codecasm.com\/blogs\/?p=17"},"modified":"2020-11-05T20:08:16","modified_gmt":"2020-11-05T20:08:16","slug":"how-to-get-angular-in-your-pocket","status":"publish","type":"post","link":"https:\/\/codecasm.com\/blogs\/how-to-get-angular-in-your-pocket\/","title":{"rendered":"How to get Angular in your pocket?"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">What we know?<\/h1>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>Angular<\/strong>&nbsp;is component based framework which is comprised of&nbsp;<strong>TypeScript<\/strong>&nbsp;and&nbsp;<strong>JavaScript<\/strong><\/li><li><a href=\"https:\/\/www.typescriptlang.org\/\"><strong>TypeScript<\/strong><\/a>&nbsp;is superset of&nbsp;<strong>JavaScript<\/strong><\/li><li>As&nbsp;<strong>JavaScript<\/strong>&nbsp;is subset of&nbsp;<strong>TypeScript<\/strong>, so every&nbsp;<strong>JavaScript<\/strong>&nbsp;code is a valid&nbsp;<strong>TypeScript<\/strong>&nbsp;code<\/li><li><strong>TypeScript<\/strong>&nbsp;has some addon features as extended to&nbsp;<strong>JavaScript<\/strong><\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">&#8211; Why&nbsp;<strong>TypeScript<\/strong>&nbsp;in Angular?<\/h2>\n\n\n\n<p><strong>TypeScript<\/strong>&nbsp;is choosen because of its most rich feature of type checking and autocompletion. Some other features mentioned below:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Consistency<\/li><li>Productivity<\/li><li>Maintainability<\/li><li>Modularity<\/li><li>Catch Errors Early<\/li><\/ul>\n\n\n\n<p>&nbsp;<br>more you can read here on it&#8217;s&nbsp;<a href=\"https:\/\/www.typescriptlang.org\/docs\/home.html\">official documentation<\/a>. This made&nbsp;<strong>Angular<\/strong>&nbsp;super-awesome \ud83d\udc4d. If you know languages like&nbsp;<strong>C# or Java<\/strong>, then it is pretty simple to get into it with the help of documentation. To start with&nbsp;<strong>Angular<\/strong>, you don&#8217;t need to deep dive into it, just an overview of it and&nbsp;<strong>basic OOP concept<\/strong>&nbsp;will work. Get the complete understanding for TypeScript on their site by firstly learning the&nbsp;<a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/basic-types.html#introduction\">basic types<\/a>&nbsp;and then by&nbsp;<a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/typescript-in-5-minutes.html\">quick overview<\/a>.<br>&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">&#8211; What is a Component?<\/h2>\n\n\n\n<p>As we see above that&nbsp;<strong>Angular<\/strong>&nbsp;is a component based framework. Each single component again contains 3 elements:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>HTML (.html) &#8211; this creates view, i.e. markup code<\/li><li>TS (.ts) &#8211; where all your business logic goes<\/li><li>CSS (.css) &#8211; here you can do styling for the markup. It can be CSS\/SCSS, etc.<\/li><\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Now, focusing towards our TS element of component i.e.&nbsp;<strong><em>.ts<\/em><\/strong>&nbsp;file, lets break down this component to get a clear idea about it.<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">we can divide structure of component in following 4 parts:<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">1. import statements:<\/h5>\n\n\n\n<p>import statements imports all the required classes from the module packages which is required for the component and methods[in your logic]. Example can be seen below:<br><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--qf7dE_tv--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/i\/up016ay3fxdjzbvan3vr.png\"><\/a><\/p>\n\n\n\n<h5 class=\"wp-block-heading\">2. @Component():<\/h5>\n\n\n\n<p>Component is a method, not a normal method, &#8216;@&#8217; symbol makes it a decorator,&nbsp;<a href=\"https:\/\/angular.io\/api\/core\/Component\">a component decorator<\/a>. This decorator provides configuration metadata of the component. It takes an object as an parameter. Example can be seen below:<br><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--UDMIznoy--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/i\/ekp70taiau12vdnvx0bo.png\"><\/a><br>Here,&nbsp;<strong>selector, templateUrl and styleUrls<\/strong>&nbsp;are the properties of the component. There are many more properties we can use as per convenience.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">3. export class:<\/h5>\n\n\n\n<p>As a framework, Angular provides modular structure. So all the components used in the application are a exported class. So whenever we need to export or reuse it we can easily import it in any module and implement in that another component. Example given below:<br><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--ixAaebSs--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/i\/u30t8lkujjb6lc5cppgt.png\"><\/a><br>Each component class can have constructor as shown in the above image. Below constructor we have ngOnInit() function which is first stage of&nbsp;<a href=\"https:\/\/angular.io\/guide\/lifecycle-hooks\">lifecycle hook<\/a>&nbsp;of the angular component. Then you go with your user define functions as you want your component should act or to be functioned.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HOPE it was helpful to you for understanding internals of Angular component. Hence, also enjoyed reading it \ud83d\ude0d. Thanks \u2764\ufe0f.<\/h2>\n","protected":false},"excerpt":{"rendered":"<p>What we know? Angular&nbsp;is component based framework which is comprised of&nbsp;TypeScript&nbsp;and&nbsp;JavaScript TypeScript&nbsp;is superset of&nbsp;JavaScript As&nbsp;JavaScript&nbsp;is subset of&nbsp;TypeScript, so every&nbsp;JavaScript&nbsp;code is a valid&nbsp;TypeScript&nbsp;code TypeScript&nbsp;has some addon features as extended to&nbsp;JavaScript &#8211; Why&nbsp;TypeScript&nbsp;in Angular? TypeScript&nbsp;is choosen because of its most rich feature of type checking and autocompletion. Some other features mentioned below: Consistency Productivity Maintainability Modularity Catch [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":18,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2,4,3],"tags":[6,7,9,12,8],"class_list":["post-17","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-javascript","category-typescript","tag-angular","tag-codecasm","tag-javascript","tag-ngpune","tag-typescript"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codecasm.com\/blogs\/wp-content\/uploads\/2020\/11\/get-angular-in-pocket.jpg?fit=1000%2C420&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codecasm.com\/blogs\/wp-json\/wp\/v2\/posts\/17","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codecasm.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codecasm.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codecasm.com\/blogs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codecasm.com\/blogs\/wp-json\/wp\/v2\/comments?post=17"}],"version-history":[{"count":1,"href":"https:\/\/codecasm.com\/blogs\/wp-json\/wp\/v2\/posts\/17\/revisions"}],"predecessor-version":[{"id":19,"href":"https:\/\/codecasm.com\/blogs\/wp-json\/wp\/v2\/posts\/17\/revisions\/19"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codecasm.com\/blogs\/wp-json\/wp\/v2\/media\/18"}],"wp:attachment":[{"href":"https:\/\/codecasm.com\/blogs\/wp-json\/wp\/v2\/media?parent=17"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codecasm.com\/blogs\/wp-json\/wp\/v2\/categories?post=17"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codecasm.com\/blogs\/wp-json\/wp\/v2\/tags?post=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}