Angular: How to Create Subscribe Custom Alert Services
Tags: angular, typescript, html, javascript
Published: 2020-05-08 15:15:12

<!-- wp:paragraph -->
<p>In this article we’ll learn how we can create subscribe based custom alert services using Angular 8.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><strong>Prerequisites:</strong><strong></strong></h2>
<!-- /wp:heading -->

<!-- wp:list {"ordered":true} -->
<ol><li>Prior knowledge of <a rel="noreferrer noopener" aria-label="typescript (opens in a new tab)" href="https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html" target="_blank">typescript</a>.</li><li>Prior knowledge of <a href="https://www.w3schools.com/js/" target="_blank" rel="noreferrer noopener" aria-label="JavaScript (opens in a new tab)">JavaScript</a>.</li><li>Prior knowledge of HTML &amp; CSS.</li><li>Visual studio code.</li><li>A development machine with <strong>Node 8.9+ &amp; NPM 5.5.1+</strong>&nbsp;installed.</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p><strong>Step-by-step tutorial of Creating Subscribe Alert Services using Angular</strong></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><strong>Step 1: Installing Angular CLI 8</strong><strong></strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>First step, where we’ll have to install latest version of Angular CLI</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>$ npm install -g @angular/cli</code></pre>
<!-- /wp:code -->

<!-- wp:heading -->
<h2><strong>Step 2: Creating your Angular 8 Project</strong><strong></strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In this second step, we will use Angular CLI to start our Angular Project </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Go to CMD or Terminal and use this command:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>$ ng new custom-loader</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>This CLI will ask you “whether you would like to add Angular routing” Say <strong>Yes.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>It will ask “which stylesheet format you would like to use”. Choose <strong>CSS.</strong><strong></strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now your project is ready Angular CLI will generate required files and folders along with NPM packages and routing too.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>After that open your project in Visual studio code and go to your root folder and run the local development server using below command:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>$ npm start</code></pre>
<!-- /wp:code -->

<!-- wp:image {"id":5559} -->
<figure class="wp-block-image"><img src="https://www.samarpaninfotech.com/wp-content/uploads/2020/01/angular-8-project-1024x363.png" alt="step of creating project in angular 8 " class="wp-image-5559"/><figcaption>step of creating project in angular 8</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Now<em> run localhost:4200/</em> in your browser</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Step 3: Add services as Alert.services</h2>
<!-- /wp:heading -->

<!-- wp:code -->
<pre class="wp-block-code"><code>$ ng generate services alert</code></pre>
<!-- /wp:code -->

<!-- wp:heading -->
<h2>Step 4: Add new component as Alert</h2>
<!-- /wp:heading -->

<!-- wp:code -->
<pre class="wp-block-code"><code>$ ng generate component alert</code></pre>
<!-- /wp:code -->

<!-- wp:heading -->
<h2>Step 5: Add below codes into it</h2>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li><strong>Add below code in alert.component.html</strong><strong></strong></li></ul>
<!-- /wp:list -->

<!-- wp:image {"id":5560} -->
<figure class="wp-block-image"><img src="https://www.samarpaninfotech.com/wp-content/uploads/2020/01/alert_component_html-code-1024x262.png" alt="" class="wp-image-5560"/></figure>
<!-- /wp:image -->

<!-- wp:list -->
<ul><li>Add below code in alert.component.ts</li></ul>
<!-- /wp:list -->

<!-- wp:image {"id":5561} -->
<figure class="wp-block-image"><img src="https://www.samarpaninfotech.com/wp-content/uploads/2020/01/alert_component_ts-code-1024x598.png" alt="" class="wp-image-5561"/></figure>
<!-- /wp:image -->

<!-- wp:list -->
<ul><li>Add below css code into alert.component.css</li></ul>
<!-- /wp:list -->

<!-- wp:image {"id":5562} -->
<figure class="wp-block-image"><img src="https://www.samarpaninfotech.com/wp-content/uploads/2020/01/alert_component_css-code-1024x322.png" alt="" class="wp-image-5562"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>Step 6: How to use this services?</h2>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li><strong>Add below code in your appropriate component.html page whenever you want to use</strong></li></ul>
<!-- /wp:list -->

<!-- wp:image {"id":5564} -->
<figure class="wp-block-image"><img src="https://www.samarpaninfotech.com/wp-content/uploads/2020/01/component_html-page-code.png" alt="" class="wp-image-5564"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Now check how to use this services</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>For success message:</li></ul>
<!-- /wp:list -->

<!-- wp:code -->
<pre class="wp-block-code"><code>this.alertService.success("Yeah !!!! You got message successfully");</code></pre>
<!-- /wp:code -->

<!-- wp:list -->
<ul><li>For warning message:</li></ul>
<!-- /wp:list -->

<!-- wp:code -->
<pre class="wp-block-code"><code>this.alertService.warning("Oh !!!! Plz check double");</code></pre>
<!-- /wp:code -->

<!-- wp:list -->
<ul><li>For error message: </li></ul>
<!-- /wp:list -->

<!-- wp:code -->
<pre class="wp-block-code"><code> this.alertService.error("Ooopss !!!! Something went wrong");</code></pre>
<!-- /wp:code -->

<!-- wp:list -->
<ul><li>For informative message: </li></ul>
<!-- /wp:list -->

<!-- wp:code -->
<pre class="wp-block-code"><code>this.alertService.info("Yepp !!! This is a important information");</code></pre>
<!-- /wp:code -->

<!-- wp:list -->
<ul><li>How to clear message?</li></ul>
<!-- /wp:list -->

<!-- wp:code -->
<pre class="wp-block-code"><code>this.alertService.clearAlertMessage();</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>I have used services something like below</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":5563} -->
<figure class="wp-block-image"><img src="https://www.samarpaninfotech.com/wp-content/uploads/2020/01/service-1024x641.png" alt="" class="wp-image-5563"/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://www.samarpaninfotech.com/wp-content/uploads/2020/01/CustomAlertServices.gif" alt="GIF Animation of  Custom Alert Services"/><figcaption>GIF Animation of  Custom Alert Services</figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3><strong>Over to You!</strong><strong></strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"backgroundColor":"very-light-gray"} -->
<p class="has-background has-very-light-gray-background-color"><em><strong>Looking for a Sample Source Code?</strong></em> Here you go: <a href="https://github.com/sandipmalaviya07/custom-alert-services" target="_blank" rel="noreferrer noopener" aria-label="GITHUB (opens in a new tab)">GITHUB</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Today you have learn how to create custom dynamic loader on HTML Element using Angular 8. If you have queries about tutorial, please ask our <a href="https://www.samarpaninfotech.com/hire-angularjs-developers/" target="_blank" rel="noreferrer noopener" aria-label="Angular Developers (opens in a new tab)">Angular Developers</a> via GitHub Profile. OR Put your Comment Below</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>That’s it for now. Stay Connected for more tutorials, until then Happy Coding…</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Related Development Resources</h2>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li><a rel="noreferrer noopener" aria-label="Solution for Angular IE Error: Uncaught (in promise) Loading chunk. (opens in a new tab)" href="https://dev.to/samarpaninfotech/angular-ie-error-uncaught-in-promise-loading-chunk-3pa" target="_blank">Solution for Angular IE Error: Uncaught (in promise) Loading chunk.</a></li><li><a rel="noreferrer noopener" aria-label="Angular: Create Custom Dynamic Loader OR Spinner on HTML Element (opens in a new tab)" href="https://dev.to/samarpaninfotech/angular-create-custom-dynamic-loader-or-spinner-on-html-element-2f3c" target="_blank">Angular: Create Custom Dynamic Loader OR Spinner on HTML Element</a></li></ul>
<!-- /wp:list -->