tag:blogger.com,1999:blog-66619795763484433482024-03-28T22:15:14.398+05:30Cooking with AngularCooking with Angular provides tutorial about Angular,Angular Material, Angular IO, Angular CLI, Angular 6,Angular 7,Angular 8, Angular 9, Angular 10, Angular Tutorial ,Angular Material Tutorial, Typescript,D3,Ionicinterfacecreatorhttp://www.blogger.com/profile/16947662416981092039noreply@blogger.comBlogger41125tag:blogger.com,1999:blog-6661979576348443348.post-28620005304757449072023-09-25T11:51:00.006+05:302023-09-25T16:34:41.963+05:30What is Node Version Manager (NVM)?<h2 style="text-align: center;"><b>Node Version Manager (NVM)</b></h2><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-ZrACe93TaNI2Xe2gxgYNH__6xMQeJ0Al3fx_-hjed6gN0LeRkCaNQUn1XSUYOWWvA7TsYRzt33kfr3w5UiVFWlb2jt5hYQwYbtNNDFJOWy5cm5luTsoIp1XmmKG9oNyEsDG65Kln3ELBZKrm_2fGYVywF49jQYw2jM4Fn597M324Vg0EPmAjIex5-09T/s1640/what%20is%20nvm.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="924" data-original-width="1640" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-ZrACe93TaNI2Xe2gxgYNH__6xMQeJ0Al3fx_-hjed6gN0LeRkCaNQUn1XSUYOWWvA7TsYRzt33kfr3w5UiVFWlb2jt5hYQwYbtNNDFJOWy5cm5luTsoIp1XmmKG9oNyEsDG65Kln3ELBZKrm_2fGYVywF49jQYw2jM4Fn597M324Vg0EPmAjIex5-09T/w400-h225/what%20is%20nvm.png" width="400" /></a></div><br /><b><br /></b></div><p><span style="color: #444444; font-family: inherit;">Node Version Manager (<b>NVM</b>) is a tool that allows you to have multiple versions of Node.js installed on your computer at the same time, and to easily switch between them. This is useful because different projects may have different requirements for Node.js versions. For example, one project may require Node.js 16.0.0, while another project may require Node.js 14.18.0. With NVM, you can easily switch between these two versions without having to uninstall and reinstall Node.js each time.</span></p><p><span style="background-color: white; font-size: 16px; white-space-collapse: preserve;"><span style="color: #444444; font-family: inherit;">NVM is also useful for keeping up with the latest Node.js releases. As new versions of Node.js are released, you can use NVM to install them and test them out on your projects before making the switch to the new version in production.</span></span></p><p><span style="background-color: white; font-size: 16px; white-space-collapse: preserve;"><span style="color: #444444; font-family: inherit;">To use NVM, you first need to install it on your computer. Once you have installed NVM, you can use it to install different versions of Node.js by running the following command:</span></span></p><p><span style="background-color: white; white-space-collapse: preserve;"></span></p><blockquote><span style="color: #444444; font-family: courier;">nvm install <version></span></blockquote><p></p><p><span style="background-color: white; font-size: 16px; white-space-collapse: preserve;"><span style="color: #444444; font-family: inherit;">For example, to install Node.js 16.0.0, you would run the following command:</span></span></p><p><span style="background-color: white; white-space-collapse: preserve;"></span></p><blockquote><span style="color: #444444; font-family: courier;">nvm install 16.0.0</span></blockquote><p></p><p><span style="background-color: white; font-size: 16px; white-space-collapse: preserve;"><span style="color: #444444; font-family: inherit;">Once you have installed a version of Node.js, you can switch to it by running the following command:</span></span></p><p><span style="background-color: white; white-space-collapse: preserve;"></span></p><blockquote><span style="color: #444444; font-family: courier;">nvm use <version></span></blockquote><p></p><p><span style="background-color: white; font-size: 16px; white-space-collapse: preserve;"><span style="color: #444444; font-family: inherit;">You can also use NVM to set a default Node.js version. This is the version of Node.js that will be used when you run Node.js commands without specifying a version. To set a default Node.js version, run the following command:</span></span></p><p><span style="background-color: white; white-space-collapse: preserve;"></span></p><blockquote><span style="color: #444444; font-family: courier;">nvm alias default <version></span></blockquote><p></p><p><span style="background-color: white; font-size: 16px; white-space-collapse: preserve;"><span style="color: #444444; font-family: inherit;">For example, to set the default Node.js version to 16.0.0, you would run the following command:</span></span></p><p><span style="background-color: white; white-space-collapse: preserve;"></span></p><blockquote><span style="color: #444444; font-family: courier;">nvm alias default 16.0.0</span></blockquote><p></p><p><span style="background-color: white; font-size: 16px; white-space-collapse: preserve;"><span style="color: #444444; font-family: inherit;">NVM is a powerful tool that can help you manage your Node.js versions easily. If you are working with Node.js, I highly recommend using NVM.</span></span></p><h2 style="text-align: left;"><b style="background-color: white; color: #1f1f1f; white-space-collapse: preserve;">reference</b><span style="background-color: white; color: #1f1f1f; white-space-collapse: preserve;">: </span><a href="https://github.com/nvm-sh/nvm#node-version-manager---" style="background-color: white; white-space-collapse: preserve;" target="_blank">git</a></h2><p><span style="background-color: white; white-space-collapse: preserve;"><span style="color: #1f1f1f; font-family: courier;"><br /></span></span></p>interfacecreatorhttp://www.blogger.com/profile/16947662416981092039noreply@blogger.com0tag:blogger.com,1999:blog-6661979576348443348.post-36875343580423608732022-01-16T20:26:00.002+05:302023-09-28T10:14:19.160+05:30Advantages and disadvantages of GUID / UUID database keys<h2 style="text-align: left;">Advantages and disadvantages of GUID / UUID database keys </h2><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEgCDRE9BXv0VzLic18s3STuezjW9aLTnmxSE7JkclQwD39jKeHq2OKQ7xf1amwe1yrMiGjWExgkpX0tjw4ABQm1sQ1tucR_24sTJnSsrbYl8a7mZcunmpHRTcHZiOd7czMscjPEsrdBDskqFhqRVncfQIaTbYNFFlEnxs8sz0nUeJVwn_2Jhypc4q7x9g=s355" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="200" data-original-width="355" height="180" src="https://blogger.googleusercontent.com/img/a/AVvXsEgCDRE9BXv0VzLic18s3STuezjW9aLTnmxSE7JkclQwD39jKeHq2OKQ7xf1amwe1yrMiGjWExgkpX0tjw4ABQm1sQ1tucR_24sTJnSsrbYl8a7mZcunmpHRTcHZiOd7czMscjPEsrdBDskqFhqRVncfQIaTbYNFFlEnxs8sz0nUeJVwn_2Jhypc4q7x9g=s320" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;"><h2 style="text-align: left;">Advantages and disadvantages of GUID / UUID database keys </h2></td></tr></tbody></table><br /><div><br /></div><div><div>GUID (Globally Unique Identifier) and UUID (Universally Unique Identifier) are both methods for generating unique identifiers in databases. They have their own sets of advantages and disadvantages, and the choice between them often depends on the specific use case and requirements. Here are some advantages and disadvantages of using GUID/UUID as database keys:</div><div><br /></div><div><b>Advantages:</b></div><div><br /></div><div><ol style="text-align: left;"><li><b>Uniqueness</b>: GUIDs and UUIDs are designed to be globally or universally unique, meaning that the chance of collision (two entities having the same identifier) is extremely low, even when generated independently in distributed systems. This uniqueness simplifies data integration across databases.</li><li><b>No Central Authority</b>: Unlike some other methods of generating unique identifiers (like auto-incrementing integers), GUIDs and UUIDs don't rely on a central authority to generate them. This makes them suitable for distributed systems where different nodes can generate their own identifiers without coordination.</li><li><b>Security</b>: GUIDs and UUIDs can be challenging to predict, which can enhance security, particularly in situations where the identifier is used for access control or session management.</li><li><b>No Need for Round-Trips</b>: In distributed systems, generating GUIDs or UUIDs on the client side eliminates the need for a round-trip to the server to fetch an identifier, which can improve performance and reduce latency.</li><li><b>Merging Data</b>: When data from multiple sources needs to be merged into a single database, using GUIDs/UUIDs can make this process easier, as conflicts are less likely to occur.</li></ol></div><div><br /></div><div><b>Disadvantages:</b></div><div><br /></div><div><ol style="text-align: left;"><li><b>Storage Space</b>: GUIDs and UUIDs are typically 128 bits long, which is larger than typical integer keys (e.g., 32 or 64 bits). This increased size can lead to increased storage requirements, especially in large databases with many rows.</li><li><b>Indexing and Query Performance</b>: Because GUIDs/UUIDs are larger than integers, indexing and querying on them may be slower, as more data needs to be processed to perform comparisons. This can impact database performance, especially in high-traffic applications.</li><li><b>Complexity</b>: GUIDs/UUIDs are more complex and less human-readable than simple integer keys. This can make debugging and data analysis more challenging.</li><li><b>Debugging and Testing</b>: In some cases, using GUIDs/UUIDs as keys can make debugging and testing more complex since you can't easily predict the identifier values.</li><li><b>Sorting</b>: Sorting rows by GUID/UUID can be less efficient than sorting by integer keys because the values are not sequential.</li><li><b>Storage Fragmentation</b>: In some database systems, GUIDs/UUIDs can lead to storage fragmentation because of the random nature of their values, potentially affecting storage efficiency.</li></ol></div><div><br /></div><div>In summary, GUIDs and UUIDs are valuable for ensuring uniqueness and compatibility in distributed and decentralized systems. However, they come with trade-offs in terms of storage space, indexing/query performance, and human readability. When deciding whether to use GUIDs or UUIDs as database keys, it's important to consider the specific requirements of your application and the potential impact on performance and storage.</div></div>interfacecreatorhttp://www.blogger.com/profile/16947662416981092039noreply@blogger.com0tag:blogger.com,1999:blog-6661979576348443348.post-49854336064748919202021-01-21T13:09:00.001+05:302021-01-21T13:12:45.175+05:30How do I kill the process currently using a port on localhost in Windows?| How to close the Open Port in Windows<p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzSqaqRd6CNH-2DjcQQUii3kRTWGP4EYGLvUgqnsWveK9FI30YWum552gTrl8cjd1qJCZfX_PAS-rBKhjWYNt0_RHxxfnnYrOhTdSpqF6q2pVrZOTZEXVOL4b6tavuaOT4omPsxPUzKhrt/s1200/Port.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="675" data-original-width="1200" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzSqaqRd6CNH-2DjcQQUii3kRTWGP4EYGLvUgqnsWveK9FI30YWum552gTrl8cjd1qJCZfX_PAS-rBKhjWYNt0_RHxxfnnYrOhTdSpqF6q2pVrZOTZEXVOL4b6tavuaOT4omPsxPUzKhrt/w400-h225/Port.jpg" width="400" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a class="question-hyperlink" href="https://stackoverflow.com/questions/39632667/how-do-i-kill-the-process-currently-using-a-port-on-localhost-in-windows" style="border: 0px; box-sizing: inherit; cursor: pointer; font-family: var(--theme-question-title-font-family); font-size: 2.07692rem; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.35; margin: 0px; padding: 0px; text-decoration-line: none; user-select: auto; vertical-align: baseline;"><span style="color: black;">How do I kill the process currently using a port on localhost in Windows?</span></a></div><p></p><div><br /></div><div><br /></div><div><p style="background-color: white; border: 0px; box-sizing: inherit; clear: both; color: #242729; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: var(--s-prose-spacing); margin-left: 0px; margin-right: 0px; margin-top: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; box-sizing: inherit; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Step 1:</strong></p><p style="background-color: white; border: 0px; box-sizing: inherit; clear: both; color: #242729; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: var(--s-prose-spacing); margin-left: 0px; margin-right: 0px; margin-top: 0px; padding: 0px; vertical-align: baseline;">Open up cmd.exe (note: you <em style="border: 0px; box-sizing: inherit; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">may</em> need to run it as an administrator, but this isn't always necessary), then run the below command:</p><p style="background-color: white; border: 0px; box-sizing: inherit; clear: both; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: var(--s-prose-spacing); margin-left: 0px; margin-right: 0px; margin-top: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #242729; font-family: Arial, Helvetica Neue, Helvetica, sans-serif;"><span style="font-size: 15px;"></span></span></p><blockquote><span style="color: #242729; font-family: Arial, Helvetica Neue, Helvetica, sans-serif;">netstat -ano | findstr :<PORT></span></blockquote><p></p></div><div><span style="background-color: white; color: #242729; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px;">(Replace </span><code style="border-radius: 3px; border: 0px; box-sizing: inherit; color: #242729; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 2px 4px; vertical-align: baseline; white-space: pre-wrap;"><PORT></code><span style="background-color: white; color: #242729; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px;"> with the port number you want, but keep the colon)</span></div><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8NE5Aww1j03LiOcDyBR3ql5WsThLdzgFVV-gQEbA96AE9mKc_y87kiZyHL2JZCbqLjPTGnv6lgRkTeL_ITF7WLdroQIh6u-UJbhoj1-wuXbMvbJ2A6QaDihDOdDRcoXlcdy2Ll-y4CXvM/s636/lEpCZ.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="74" data-original-width="636" height="46" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8NE5Aww1j03LiOcDyBR3ql5WsThLdzgFVV-gQEbA96AE9mKc_y87kiZyHL2JZCbqLjPTGnv6lgRkTeL_ITF7WLdroQIh6u-UJbhoj1-wuXbMvbJ2A6QaDihDOdDRcoXlcdy2Ll-y4CXvM/w400-h46/lEpCZ.png" width="400" /></a></div><br /><span style="background-color: white; color: #242729; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px;">The area circled in red shows the PID (process identifier). Locate the PID of the process that's using the port you want.</span></div><div><p style="background-color: white; border: 0px; box-sizing: inherit; clear: both; color: #242729; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: var(--s-prose-spacing); margin-left: 0px; margin-right: 0px; margin-top: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; box-sizing: inherit; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Step 2:</strong></p><p style="background-color: white; border: 0px; box-sizing: inherit; clear: both; color: #242729; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: var(--s-prose-spacing); margin-left: 0px; margin-right: 0px; margin-top: 0px; padding: 0px; vertical-align: baseline;">Next, run the following command:</p><p style="background-color: white; border: 0px; box-sizing: inherit; clear: both; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: var(--s-prose-spacing); margin-left: 0px; margin-right: 0px; margin-top: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #242729; font-family: Arial, Helvetica Neue, Helvetica, sans-serif;"><span style="font-size: 15px;"></span></span></p><blockquote><span style="color: #242729; font-family: Arial, Helvetica Neue, Helvetica, sans-serif;">taskkill /PID <PID> /F</span></blockquote><p><span style="color: #242729; font-family: Arial, Helvetica Neue, Helvetica, sans-serif;">(No colon this time)</span></p><div class="separator" style="clear: both; text-align: center;"><span style="color: #242729; font-family: Arial, Helvetica Neue, Helvetica, sans-serif;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4z4GCcXi8OPHUZGr6ykzXlUAcItkwD-9H7RNSRnd-sjuhFExzld8XuArZ1RhX8-hebSnbYg_vJuQqltSWLaB6ODtlROULHa0xVrbhK6JCO6_5AsEhWV3hFG7sBNm4dukaM47E6Xt2HaSc/s453/8k64x.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="55" data-original-width="453" height="49" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4z4GCcXi8OPHUZGr6ykzXlUAcItkwD-9H7RNSRnd-sjuhFExzld8XuArZ1RhX8-hebSnbYg_vJuQqltSWLaB6ODtlROULHa0xVrbhK6JCO6_5AsEhWV3hFG7sBNm4dukaM47E6Xt2HaSc/w400-h49/8k64x.png" width="400" /></a></span></div><span style="color: #242729; font-family: Arial, Helvetica Neue, Helvetica, sans-serif;"><br /><p>Lastly, you can check whether the operation succeeded or not by re-running the command in "Step 1". If it was successful you shouldn't see any more search results for that port number.</p></span><span style="color: #242729; font-family: Arial, Helvetica Neue, Helvetica, sans-serif;"><span style="font-size: 15px;"><p>Cheers!...............</p><p> </p></span></span><p></p></div>interfacecreatorhttp://www.blogger.com/profile/16947662416981092039noreply@blogger.com0tag:blogger.com,1999:blog-6661979576348443348.post-54428160273347693102020-11-02T10:33:00.001+05:302021-03-08T15:06:00.711+05:30How to Re-Install Angular Cli in windows<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
How to Install Angular Cli in windows</h2>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYiDAkxXu0RP32OAbFTIYYqqeEqtZR9pzkAW352_FSR2zgbO7QcfBIcu1OMYpd2f0LJeFTcvQ2byGChiDtr5cYVqP0Jp0ugA2cqB5h-60CCKaLCO8cv-ZvfErN0vuieASfdTGOp_5_I89P/s1600/Angular+Cli.webp" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="400" data-original-width="700" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYiDAkxXu0RP32OAbFTIYYqqeEqtZR9pzkAW352_FSR2zgbO7QcfBIcu1OMYpd2f0LJeFTcvQ2byGChiDtr5cYVqP0Jp0ugA2cqB5h-60CCKaLCO8cv-ZvfErN0vuieASfdTGOp_5_I89P/s320/Angular+Cli.webp" width="320" /></a></div>
<br /></div>
<div>
Step 1: </div>
<div>
Run The Command Prompt As Administrator.</div>
<div>
<br /></div>
<div>
Step 2:</div>
<blockquote>
Run : <span style="color: var(--black-800); font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-style: inherit; font-variant-caps: inherit; font-variant-ligatures: inherit; font-weight: inherit; white-space: inherit;">npm uninstall -g @angular/cli</span></blockquote>
<div>
Step 3:</div>
<blockquote class="tr_bq">
Run <span style="color: var(--black-800); font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-style: inherit; font-variant-caps: inherit; font-variant-ligatures: inherit; font-weight: inherit; white-space: inherit;">npm cache clean --force</span></blockquote>
<div>
Step 4:</div>
<blockquote class="tr_bq">
Run : npm cache verify</blockquote>
Step 5:<br />
<blockquote class="tr_bq">
Run :npm cache verify --force</blockquote>
<br />
<div>
<div>
Step 6:</div>
<div>
Now Delete the following the paths</div>
<blockquote class="tr_bq">
C:\Users\<User Name>\AppData\Roaming\npm and<br />
C:\Users\<User Name>\AppData\Roaming\npm-cache</blockquote>
Step 7:<br />
<blockquote class="tr_bq">
Restart the Computer</blockquote>
The Angular CLI Successfully Uninstalled.</div><div><br /></div><div><br />
Step 8:</div><div><span> </span></div><div><span>To install the Angular CLI, open a terminal window, and run the following command:</span></div><div><blockquote class="tr_bq">Run : npm install -g @angular/cli</blockquote><p>To Check the Version</p><blockquote>Run : ng version</blockquote><p></p><p>Now you can play with latest Angular CLI</p><p><br /></p>
<br /></div>
</div>
interfacecreatorhttp://www.blogger.com/profile/16947662416981092039noreply@blogger.com0tag:blogger.com,1999:blog-6661979576348443348.post-46399948473748551512020-03-07T18:54:00.000+05:302020-03-07T18:54:07.888+05:30Upgrade Angular 8 to Angular 9 | Upgrade angular cli 9<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
Upgrade Angular 8 to Angular 9</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr1qa-tQBrjH0Fc1Wf2i_X683zAHad46l1-VXiJCAHl_909RKHD8Or5Rb5uW2VXxQBObbBOhzDyuIBUmsm-nvVKFpe1htXCTEWEdCpQyLUqkdsUa7Ddx-70UO1Pk20CB1ZUPOpE2soKwr4/s1600/Upgrade+from+Angular+8+to+9.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1600" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr1qa-tQBrjH0Fc1Wf2i_X683zAHad46l1-VXiJCAHl_909RKHD8Or5Rb5uW2VXxQBObbBOhzDyuIBUmsm-nvVKFpe1htXCTEWEdCpQyLUqkdsUa7Ddx-70UO1Pk20CB1ZUPOpE2soKwr4/s640/Upgrade+from+Angular+8+to+9.jpg" width="640" /></a></div>
<div>
<br /></div>
<h3 style="text-align: left;">
Before Updating </h3>
<h4 style="text-align: left;">
B.Step 1</h4>
<div>
Instead of importing from @angular/material, you should import deeply from the specific component. </div>
<div>
<br /></div>
<blockquote class="tr_bq">
E.g. import {MatAutocompleteModule} from '@angular/material/autocomplete';. </blockquote>
ng update will do this automatically for you.<br />
<h4>
B.Step 2</h4>
<div>
For lazy loaded modules via the router, make sure you are using dynamic imports. Importing via string is removed in v9. ng update should take care of this automatically. </div>
<div>
<br /></div>
<div style="text-align: left;">
<b>Before </b></div>
<blockquote class="tr_bq">
const routes: Routes = [{<br /> path: 'lazy',<br /> // The following string syntax for loadChildren is deprecated<br /> loadChildren: './lazy/lazy.module#LazyModule'<br />}];</blockquote>
<b>After</b><br />
<blockquote class="tr_bq">
const routes: Routes = [{<br /> path: 'lazy',<br /> // The new import() syntax<br /> loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)<br />}];</blockquote>
<b>B.Step 3</b><br />
<br />
Running Angular itself in a web worker via @angular/platform-webworker is not yet supported in Angular CLI.<br />
<b>B.Step 4</b><br />
Support for web tracing framework in Angular was deprecated in version 8. You should stop using any of the wtf* APIs.<br />
<h3 style="text-align: left;">
During the Update</h3>
<h4 style="text-align: left;">
D.Step 1</h4>
<div>
Make sure you are using <a href="https://nodejs.org/en/download/" target="_blank">Node 10.13 or later</a>. to check run <b>node -v</b> using terminal or command prompt.</div>
<div>
<h4>
D.Step 2</h4>
</div>
<div>
Run <b>ng update @angular/core@8 @angular/cli@8 --create-commits --allow-dirty </b><b> --force</b><b> . </b>which brings your project to latest 8.x version </div>
<div>
<h4>
D.Step 3</h4>
</div>
<div>
Run<b> ng update @angular/core @angular/cli --create-commits --allow-dirty --force </b>which should bring you to version 9 of Angular.Your project has now been updated to TypeScript 3.7</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPR1mx2S_-zlBwKs7jHNbXEWYIzESprzPm84cbqZ89MIDI498I0-xSeq4brEZP1Hu7rPqcxoijoP0qC1G-sc2WtNhShdvBrSwHTsNVQkUvsxxXnw4s_Wz8BVP-L6adFcaz1kJqzq8mO1Is/s1600/Angular+Update+from+8+to+Angular+9+.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="646" data-original-width="1423" height="181" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPR1mx2S_-zlBwKs7jHNbXEWYIzESprzPm84cbqZ89MIDI498I0-xSeq4brEZP1Hu7rPqcxoijoP0qC1G-sc2WtNhShdvBrSwHTsNVQkUvsxxXnw4s_Wz8BVP-L6adFcaz1kJqzq8mO1Is/s400/Angular+Update+from+8+to+Angular+9+.png" width="400" /></a></div>
<div>
<br /></div>
<div>
<h4>
D.Step 4</h4>
</div>
<div>
if you are using material angular Run <b>ng update @angular/material --create-commits --allow-dirty --force.</b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkpS-0J1bSjAAPlKQTD_b9jezUB3aiHZzXUMmqJJdC9O3wd8k7I3buNfYX4O_i7YoTwbVR7tnfswBS6G2yOzYf04IXdHLcxqGvczRg_oDAoiVuBq2affpBw8VPIrcZu-QVub49oIfCR9tT/s1600/Angular+Material+Update+from+8+to+Angular+9+.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="634" data-original-width="1600" height="157" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkpS-0J1bSjAAPlKQTD_b9jezUB3aiHZzXUMmqJJdC9O3wd8k7I3buNfYX4O_i7YoTwbVR7tnfswBS6G2yOzYf04IXdHLcxqGvczRg_oDAoiVuBq2affpBw8VPIrcZu-QVub49oIfCR9tT/s400/Angular+Material+Update+from+8+to+Angular+9+.png" width="400" /></a></div>
<div>
<h4>
D.Step 5</h4>
</div>
<div>
If your project depends on other Angular libraries,run <b>ng update .</b></div>
<div>
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhIi3bgJpy9x4xEnitj6ugzVl1TlU2saN4f5omYcVSYqlSOhnIhM0Su8vdod8Kaq2gt-FzK_FN9dMhIV3b4mQYuGLbZEPNR26kt-5CFfeRTdwmBahQSlyRDaLkfZnOj9AcO5aMAm7o08MH/s1600/Angular+ng+Update+from+8+to+Angular+9+.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="628" data-original-width="1600" height="156" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhIi3bgJpy9x4xEnitj6ugzVl1TlU2saN4f5omYcVSYqlSOhnIhM0Su8vdod8Kaq2gt-FzK_FN9dMhIV3b4mQYuGLbZEPNR26kt-5CFfeRTdwmBahQSlyRDaLkfZnOj9AcO5aMAm7o08MH/s400/Angular+ng+Update+from+8+to+Angular+9+.png" width="400" /></a></div>
<div>
<b>D.Step 6: </b></div>
<div>
More about the changes refer : <a href="https://angular.io/guide/updating-to-version-9" target="_blank">Angular 9 Version Changes</a></div>
<div>
<br /></div>
<div>
now run <b>ng serve --open </b>check your project working status</div>
<div>
<br /></div>
<blockquote class="tr_bq" style="text-align: center;">
Welcome to Angular 9 with Ivy , the new rendering engine..</blockquote>
<div>
<br /></div>
<br />
</div>
interfacecreatorhttp://www.blogger.com/profile/16947662416981092039noreply@blogger.com0tag:blogger.com,1999:blog-6661979576348443348.post-69864362687148425002019-12-02T18:55:00.001+05:302020-03-14T12:34:12.310+05:30How to Uninstall Angular Cli in windows|Uninstall Angular Cli <div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
How to Uninstall Angular Cli in windows</h2>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYiDAkxXu0RP32OAbFTIYYqqeEqtZR9pzkAW352_FSR2zgbO7QcfBIcu1OMYpd2f0LJeFTcvQ2byGChiDtr5cYVqP0Jp0ugA2cqB5h-60CCKaLCO8cv-ZvfErN0vuieASfdTGOp_5_I89P/s1600/Angular+Cli.webp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="400" data-original-width="700" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYiDAkxXu0RP32OAbFTIYYqqeEqtZR9pzkAW352_FSR2zgbO7QcfBIcu1OMYpd2f0LJeFTcvQ2byGChiDtr5cYVqP0Jp0ugA2cqB5h-60CCKaLCO8cv-ZvfErN0vuieASfdTGOp_5_I89P/s320/Angular+Cli.webp" width="320" /></a></div>
<br /></div>
<div>
Step 1: </div>
<div>
<div>
Run The Command Prompt As Administrator.</div>
</div>
<div>
<br /></div>
<div>
Step 2:</div>
<blockquote class="tr_bq">
Run : npm uninstall -g @angular/cli</blockquote>
<div>
Step 3:</div>
<blockquote class="tr_bq">
Run npm cache clean</blockquote>
<div>
Step 4:</div>
<blockquote class="tr_bq">
Run : npm cache verify</blockquote>
Step 5:<br />
<blockquote class="tr_bq">
Run :npm cache verify --force</blockquote>
<br />
<div>
<div>
Step 6:</div>
<div>
Now Delete the following the paths</div>
<blockquote class="tr_bq">
C:\Users\"Your_syste_User_name"\AppData\Roaming\npm and<br />
C:\Users\"Your_syste_User_name"\AppData\Roaming\npm-cache</blockquote>
Step 7:<br />
<blockquote class="tr_bq">
Restart the Computer</blockquote>
The Angular Cli Successfully Uninstalled .<br />
<br />
<br /></div>
</div>
interfacecreatorhttp://www.blogger.com/profile/16947662416981092039noreply@blogger.com0tag:blogger.com,1999:blog-6661979576348443348.post-1318378835544689562019-02-01T10:29:00.003+05:302019-02-12T10:32:28.419+05:30Angular 7 D3|D3 Axes| Walkthrough Axes in D3 |D3|D3 Part13<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
Walk-through with Axes in D3</h2>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKv_zXfZ2jXof_PG7pfR_1-Qqh1wfM7rTn1A7iTphNghoNbvJ7gyo-ikSXp0FztDGQGT6eOzqtgrDmnVOCWdApRZlWGDxTn_RFCMpZ-S6ETEti_fQzW-oHLv_T3dqfsmT1hMhLUVKH4W15/s1600/Angular+7+D3+Axes.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKv_zXfZ2jXof_PG7pfR_1-Qqh1wfM7rTn1A7iTphNghoNbvJ7gyo-ikSXp0FztDGQGT6eOzqtgrDmnVOCWdApRZlWGDxTn_RFCMpZ-S6ETEti_fQzW-oHLv_T3dqfsmT1hMhLUVKH4W15/s400/Angular+7+D3+Axes.png" width="400" /></a></div>
<br />
Before we start to <b><i>Axes in D3</i></b> refer<br />
<div>
<ul style="text-align: left;">
<li><a href="https://www.interfacecreator.com/2018/10/d3-chartangular-d3-chartd3-bar.html" rel="nofollow" target="_blank">D3 Part 1</a> - SVG Shapes.</li>
<li><a href="https://www.interfacecreator.com/2018/10/d3-lab-with-angular-7d3-setupd3-with.html" rel="nofollow" target="_blank">D3 Part 2</a>- D3 + Angular 7 Integration .</li>
<li><a href="https://www.interfacecreator.com/2018/10/d3-lab-with-angular-7d3-data-bound-to.html" rel="nofollow" target="_blank">D3 Part 3</a>- D3 Data Bound to DOM Elements.</li>
<li><a href="https://www.interfacecreator.com/2018/10/d3-lab-with-angular-7d3-data-bound-to.html" rel="nofollow" target="_blank">D3 Part 4</a>- D3 Creating SVG Elements Based on Data.</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3-d3-svg-coordinate-spaced3.html" rel="nofollow" target="_blank">D3 Part 5</a>- D3 SVG Coordinate Space.</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3-data-structures-using-d3d3.html" rel="nofollow" target="_blank">D3 Part 6</a>- Data Structures Using D3.</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3dynamic-svg-coordinate.html" rel="nofollow" target="_blank">D3 Part 7</a>- Dynamic SVG Coordinate Space Using D3.</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3basic-d3-array-utilitiesd3.html" rel="nofollow" target="_blank">D3 Part 8</a>- Basic D3 Array Utilities.</li>
<li><a href="https://www.interfacecreator.com/2018/11/svg-group-element-and-d3d3-part8.html" rel="nofollow" target="_blank">D3 Part 9</a>- SVG Group Element.</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3svg-text-element-d3d3-d3.html" rel="nofollow" target="_blank">D3 Part 10</a>- SVG Text Element.</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3d3-scalesd3-d3-part11.html" rel="nofollow" target="_blank">D3 Part 11</a>- SVG Linear Scales.</li>
<li><a href="https://www.interfacecreator.com/2019/01/angular-7-d3d3-axesaxes-in-d3d3d3-part12.html" rel="nofollow" target="_blank">D3 Part 12</a>- Axes in D3.</li>
</ul>
<div>
<h2 style="text-align: center;">
Walk-through with Axes in D3</h2>
</div>
</div>
</div>
<div>
<br /></div>
<div>
<h3 style="text-align: left;">
<b>Topaxis() </b></h3>
</div>
<div>
<i>let width = 400, height = 100;</i></div>
<div>
<div>
SVG width and height as variables.</div>
<div>
<br /></div>
<div>
<i>let data = [250,20,30,40,50,60,70,80,1000,1100,1500,2000,2200];</i></div>
<div>
dataset as an array</div>
<div>
<br /></div>
<div>
<i>let svgoftopaxes = d3.select('#Topaxiselement').append('svg').attr('width', width).attr('height', height);</i></div>
<div>
Create SVG element with defined width and height using d3</div>
<div>
<br /></div>
<div>
<i>var topscale = d3.scaleLinear().domain([d3.min(data), d3.max(data)]).range([0, width - 100]);</i></div>
<div>
Linear Scale created using d3 scaleLinear , d3 min , d3 max</div>
<div>
<br /></div>
<div>
.range([0,width-100]) specifies the range [0,300]. So value 10 will be map to 0 and value 300 will be map to 30.</div>
<div>
<br /></div>
<div>
<i>let gaxistop = svgoftopaxes.append("g").attr("transform", "translate(50, 20)");</i></div>
<div>
group created with transform to (50,20) location</div>
<div>
<br /></div>
<div>
<i>let top_axis = d3.axisTop().scale(topscale);</i></div>
<div>
<br /></div>
<div>
using d3.axisTop to create a top axis with scale value</div>
<div>
<br /></div>
<div>
<i>gaxistop.call(top_axis);</i></div>
<div>
<i><br />
</i></div>
<div>
Append the top_axis to the group element gaxistop using call method.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8F39ORY6K5yJp2TYmkkqTG2yPBWs45QWx3kIgdZSXsMX_-ZRb5XUTP6GGb7g-jYaaC32zOFhcIvnOi5JZQzWi3jBUjyEHN753X-SPbim9aQWaoGa5INXnY-jYKeQLHMvi66qc9vmJ3Xpm/s1600/Top+Axis.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="280" data-original-width="610" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8F39ORY6K5yJp2TYmkkqTG2yPBWs45QWx3kIgdZSXsMX_-ZRb5XUTP6GGb7g-jYaaC32zOFhcIvnOi5JZQzWi3jBUjyEHN753X-SPbim9aQWaoGa5INXnY-jYKeQLHMvi66qc9vmJ3Xpm/s400/Top+Axis.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div>
<i>Code Action @<a href="https://stackblitz.com/edit/angulard31" target="_blank">StackBlitz</a></i></div>
</div>
<div>
<br /></div>
</div>
interfacecreatorhttp://www.blogger.com/profile/16947662416981092039noreply@blogger.com1tag:blogger.com,1999:blog-6661979576348443348.post-65336122816620801382019-01-24T22:44:00.000+05:302019-02-01T09:43:06.740+05:30Angular 7 D3|D3 Axes|Axes in D3|D3|D3 Part12<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="clear: both; text-align: center;">
Axes in D3 Using Angular 7</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2NVoiTpouOvgUCph_rbxcKM53ftoksAUsv2RGnkOO6Sa-iD7vZ7ejdxKvAqmIJwYXEVR6ecFmGK4K9SysLA-O29pVTibFObBlFzq-g5gBqpxPO8STkBFQJYz2Zv3le0XVE37Fv5IM_NX_/s1600/D3+Axis.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2NVoiTpouOvgUCph_rbxcKM53ftoksAUsv2RGnkOO6Sa-iD7vZ7ejdxKvAqmIJwYXEVR6ecFmGK4K9SysLA-O29pVTibFObBlFzq-g5gBqpxPO8STkBFQJYz2Zv3le0XVE37Fv5IM_NX_/s400/D3+Axis.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Before we start to <b><i>Axes in D3</i></b> refer<br />
<div>
<ul style="text-align: left;">
<li><a href="https://www.interfacecreator.com/2018/10/d3-chartangular-d3-chartd3-bar.html" rel="nofollow" target="_blank">D3 Part 1</a> - SVG Shapes.</li>
<li><a href="https://www.interfacecreator.com/2018/10/d3-lab-with-angular-7d3-setupd3-with.html" rel="nofollow" target="_blank">D3 Part 2</a>- D3 + Angular 7 Integration .</li>
<li><a href="https://www.interfacecreator.com/2018/10/d3-lab-with-angular-7d3-data-bound-to.html" rel="nofollow" target="_blank">D3 Part 3</a>- D3 Data Bound to DOM Elements.</li>
<li><a href="https://www.interfacecreator.com/2018/10/d3-lab-with-angular-7d3-data-bound-to.html" rel="nofollow" target="_blank">D3 Part 4</a>- D3 Creating SVG Elements Based on Data.</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3-d3-svg-coordinate-spaced3.html" rel="nofollow" target="_blank">D3 Part 5</a>- D3 SVG Coordinate Space.</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3-data-structures-using-d3d3.html" rel="nofollow" target="_blank">D3 Part 6</a>- Data Structures Using D3.</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3dynamic-svg-coordinate.html" rel="nofollow" target="_blank">D3 Part 7</a>- Dynamic SVG Coordinate Space Using D3.</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3basic-d3-array-utilitiesd3.html" rel="nofollow" target="_blank">D3 Part 8</a>- Basic D3 Array Utilities.</li>
<li><a href="https://www.interfacecreator.com/2018/11/svg-group-element-and-d3d3-part8.html" rel="nofollow" target="_blank">D3 Part 9</a>- SVG Group Element.</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3svg-text-element-d3d3-d3.html" rel="nofollow" target="_blank">D3 Part 10</a>- SVG Text Element.</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3d3-scalesd3-d3-part11.html" rel="nofollow" target="_blank">D3 Part 11</a>- SVG Linear Scales.</li>
</ul>
<div style="text-align: center;">
<b>Axes in D3</b><br />
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: "Times New Roman"; font-size: medium; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
</div>
<br />
<div style="text-align: left;">
In this lab, we will learn to create axes using scales in D3. The axes render readable reference marks for scales. Graphs have two axes: the horizontal (X-Axis) and the vertical (Y-axis) axis. D3 provides functions to draw axes. An axis is made of lines, ticks, and labels. An axis uses a scale so each axis will need to be given a scale to work with.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
D3 provides the following functions to draw axes.</div>
<div style="text-align: left;">
</div>
<ul style="text-align: left;">
<li>d3.axisTop()</li>
<li>d3.axisRight()</li>
<li>d3.axisBottom()</li>
<li>d3.axisLeft()</li>
</ul>
<div style="text-align: left;">
<div>
<b>d3.axisTop()</b></div>
<div>
Constructs a new top-oriented axis generator for the given scale</div>
<div>
<b>d3.axisRight()</b></div>
<div>
Constructs a new right-oriented axis generator for the given scale</div>
<div>
<b>d3.axisBottom()</b></div>
<div>
Constructs a new bottom-oriented axis generator for the given scale</div>
<div>
<b>d3.axisLeft()</b></div>
<div>
Constructs a new left-oriented axis generator for the given scale<br />
<br />
<h3 style="text-align: left;">
Top Axis</h3>
</div>
</div>
<div style="text-align: left;">
<blockquote class="tr_bq">
topaxis() {<br />
let width = 400, height = 100;<br />
let data = [250,20,30,40,50,60,70,80,1000,1100,1500,2000,2200];<br />
var topscale = d3.scaleLinear().domain([d3.min(data), d3.max(data)]).range([0, width - 100]);<br />
let svgoftopaxes = d3.select('#Topaxiselement').append('svg').attr('width', width).attr('height', height);<br />
let gaxistop = svgoftopaxes.append("g").attr("transform", "translate(50, 20)");<br />
let top_axis = d3.axisTop().scale(topscale);<br />
gaxistop.call(top_axis);<br />
}</blockquote>
<div style="text-align: left;">
Top Axis Output </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdE7W6XZC8xuv_0UlTiwg475ri1l_gr_TTFsac-D1Sy_VRhraKxPdGVJNY5J-MccuicASEuQyEhuJKg1LuWHLMxHpNH0ZPw9_38nY0IlNBk1OE-a7HMEsaooLN8Qv_REJ_znvn18LtRrMv/s1600/Top+Axis.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="280" data-original-width="610" height="146" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdE7W6XZC8xuv_0UlTiwg475ri1l_gr_TTFsac-D1Sy_VRhraKxPdGVJNY5J-MccuicASEuQyEhuJKg1LuWHLMxHpNH0ZPw9_38nY0IlNBk1OE-a7HMEsaooLN8Qv_REJ_znvn18LtRrMv/s320/Top+Axis.png" width="320" /></a></div>
<div style="text-align: left;">
<br /></div>
<h3 style="text-align: left;">
Bottom Axis</h3>
<blockquote class="tr_bq">
bottomaxis(){<br />
let width = 400, height = 100;<br />
let data = [250,20,30,40,50,60,70,80,1000,1100,1500,2000,2200];<br />
var Bottomscale = d3.scaleLinear().domain([d3.min(data), d3.max(data)]).range([0, width - 100]);<br />
let svgofBottomaxes = d3.select('#Bottomaxiselement').append('svg').attr('width', width).attr('height', height);<br />
let gaxisbottom = svgofBottomaxes.append("g").attr("transform", "translate(50, 20)");<br />
let bottom_axis = d3.axisBottom().scale(Bottomscale);<br />
gaxisbottom.call(bottom_axis);<br />
}</blockquote>
<div style="text-align: left;">
Bottom Axis Output </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLBBNN-mUM2wqLpW5eSnih9Hkdtl-Abxe5xqU5ZEC-wQZqs-ARhMj1t8vrHa1SDV7Lu6JN55dR6gtLgPv96t6cEJuYF88avlr7DSbhw0P4PTzOAgmxkSD5-JZydqs9tVIwZhzeL9PNdN7Q/s1600/Bottom+Axis.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="280" data-original-width="527" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLBBNN-mUM2wqLpW5eSnih9Hkdtl-Abxe5xqU5ZEC-wQZqs-ARhMj1t8vrHa1SDV7Lu6JN55dR6gtLgPv96t6cEJuYF88avlr7DSbhw0P4PTzOAgmxkSD5-JZydqs9tVIwZhzeL9PNdN7Q/s320/Bottom+Axis.png" width="320" /></a></div>
<div style="text-align: left;">
<br /></div>
<h3 style="text-align: left;">
Right Axis</h3>
<blockquote class="tr_bq">
rightaxis() {<br />
let width = 400, height = 250;<br />
let data = [250,20,30,40,50,60,70,80,1000,1100,1500,2000,2200];<br />
let leftscale = d3.scaleLinear().domain([0, d3.max(data)]) .range([height/2, 0]);<br />
let svgofleftaxis = d3.select('#Rightaxiselement') .append('svg') .attr('width', width) .attr('height', height);<br />
let gaxisLeft= svgofleftaxis.append("g");//.attr("transform", "translate(50, 10)");<br />
let left_axis = d3.axisRight().scale(leftscale);<br />
gaxisLeft.call(left_axis);<br />
}</blockquote>
<div style="text-align: left;">
Right Axis Output </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNe_IWNkWgLEkC59EjXWsoBlgRxQ5iij6gous6UMxgkaaBNXcSQMFLwLAof7gzBsJIyMf8B0SM2aj6vyEGQBovG_Ko1XrhfwbV1ZJyDZgtu3UX05sRVOMXGfz84ewMEkB_O8_x5I-_PVxZ/s1600/Right+Axis.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="280" data-original-width="496" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNe_IWNkWgLEkC59EjXWsoBlgRxQ5iij6gous6UMxgkaaBNXcSQMFLwLAof7gzBsJIyMf8B0SM2aj6vyEGQBovG_Ko1XrhfwbV1ZJyDZgtu3UX05sRVOMXGfz84ewMEkB_O8_x5I-_PVxZ/s320/Right+Axis.png" width="320" /></a></div>
<div style="text-align: left;">
<br /></div>
<h3 style="text-align: left;">
Left Axis</h3>
<blockquote class="tr_bq">
leftaxis(){<br />
let width = 400, height = 250;<br />
let data = [250,20,30,40,50,60,70,80,1000,1100,1500,2000,2200];<br />
let leftscale = d3.scaleLinear().domain([0, d3.max(data)]) .range([height/2, 0]);<br />
let svgofleftaxis = d3.select('#yaxeselement') .append('svg') .attr('width', width) .attr('height', height);<br />
let gaxisLeft= svgofleftaxis.append("g").attr("transform", "translate(50, 10)");<br />
let left_axis = d3.axisLeft().scale(leftscale);<br />
gaxisLeft.call(left_axis);<br />
}</blockquote>
<div style="text-align: left;">
Left Axis Output </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2DEe0vp7dPx9xor7wBG_uVYxcQ1je-rVVg78sbRkqccYKmXZ9mqlIvimvAnLygZsM-8YwlhYU22FiXmqyRmsyrJq2LiPOagN5ol9uv4e7TgNVHktia_SBRMjqxN2eR2Q8qx6CPByP60yO/s1600/Left+Axis.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="310" data-original-width="496" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2DEe0vp7dPx9xor7wBG_uVYxcQ1je-rVVg78sbRkqccYKmXZ9mqlIvimvAnLygZsM-8YwlhYU22FiXmqyRmsyrJq2LiPOagN5ol9uv4e7TgNVHktia_SBRMjqxN2eR2Q8qx6CPByP60yO/s320/Left+Axis.png" width="320" /></a></div>
<div style="text-align: left;">
<br /></div>
<h3 style="text-align: left;">
The XY Axes</h3>
<blockquote class="tr_bq">
bootomleftaxis() {<br />
let width = 400, height = 400;<br />
let data = [250,20,30,40,50,60,70,80,1000,1100,1500,2000,2200];<br />
let bottomscale = d3.scaleLinear().domain([d3.min(data), d3.max(data)]).range([0, width - 100]);<br />
let leftscale = d3.scaleLinear().domain([0, d3.max(data)]) .range([height/2, 0]);<br />
let xAxisTranslate =(height / 2) + 10;<br />
let svgofbottomleft = d3.select('#xyaxeselement').append('svg').attr('width', width).attr('height', 250);<br />
let gyonxy = svgofbottomleft.append("g").attr("transform", "translate(50, 10)");<br />
let gxonxy =svgofbottomleft.append("g").attr("transform", "translate(50, " + xAxisTranslate +")");<br />
let left_axis = d3.axisLeft().scale(leftscale);<br />
let bottom_axis = d3.axisBottom().scale(bottomscale);<br />
gyonxy.call(left_axis);<br />
gxonxy.call(bottom_axis);<br />
}</blockquote>
Output of XY Axes<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjST1LWb9Q9PI_uHrsfFHPCXb8w7OCFU8p1Z_sJ266p78S5u8h70JMmUBemqc-NTBwDS0A9DYrK4aeL1P1qpnfCx39aUme0SYKl38rQJOHTOGyDDHqowtdtKukPFK2tjZLiruzjNWxNEQrs/s1600/XYAxes.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="390" data-original-width="733" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjST1LWb9Q9PI_uHrsfFHPCXb8w7OCFU8p1Z_sJ266p78S5u8h70JMmUBemqc-NTBwDS0A9DYrK4aeL1P1qpnfCx39aUme0SYKl38rQJOHTOGyDDHqowtdtKukPFK2tjZLiruzjNWxNEQrs/s400/XYAxes.png" width="400" /></a></div>
<br />
<i>Code Action @<a href="https://stackblitz.com/edit/angulard31" target="_blank">StackBlitz</a></i><br />
Next Lab Walkthrough with D3 Axes </div>
</div>
</div>
</div>
interfacecreatorhttp://www.blogger.com/profile/16947662416981092039noreply@blogger.com0tag:blogger.com,1999:blog-6661979576348443348.post-32090022016171074272018-11-30T16:44:00.003+05:302018-11-30T18:59:45.073+05:30Angular 7 D3|D3 Scales|D3| D3 Part11<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="clear: both; text-align: center;">
D3 Scales</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhou9vfxop8tYEDREZj0ZdpmXG78PAh58Yv-aemkuwtpJ9VkhWyg6PEK6EiUXWvJHqzezg2xRkjk8lLn8QBLVlpOBqnOsU9ti_LHK0xuo14e6Wm_xJ1PUxM3joMTBttSq6kIV-Ili62YGsE/s1600/D3+Scales.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhou9vfxop8tYEDREZj0ZdpmXG78PAh58Yv-aemkuwtpJ9VkhWyg6PEK6EiUXWvJHqzezg2xRkjk8lLn8QBLVlpOBqnOsU9ti_LHK0xuo14e6Wm_xJ1PUxM3joMTBttSq6kIV-Ili62YGsE/s400/D3+Scales.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Before we start to <b><i>D3 Scales</i></b> refer<br />
<div>
<ul style="text-align: left;">
<li><a href="https://www.interfacecreator.com/2018/10/d3-chartangular-d3-chartd3-bar.html" rel="nofollow" target="_blank">D3 Part 1</a> - SVG Shapes.</li>
<li><a href="https://www.interfacecreator.com/2018/10/d3-lab-with-angular-7d3-setupd3-with.html" rel="nofollow" target="_blank">D3 Part 2</a>- D3 + Angular 7 Integration .</li>
<li><a href="https://www.interfacecreator.com/2018/10/d3-lab-with-angular-7d3-data-bound-to.html" rel="nofollow" target="_blank">D3 Part 3</a>- D3 Data Bound to DOM Elements.</li>
<li><a href="https://www.interfacecreator.com/2018/10/d3-lab-with-angular-7d3-data-bound-to.html" rel="nofollow" target="_blank">D3 Part 4</a>- D3 Creating SVG Elements Based on Data.</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3-d3-svg-coordinate-spaced3.html" rel="nofollow" target="_blank">D3 Part 5</a>- D3 SVG Coordinate Space.</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3-data-structures-using-d3d3.html" rel="nofollow" target="_blank">D3 Part 6</a>- Data Structures Using D3.</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3dynamic-svg-coordinate.html" rel="nofollow" target="_blank">D3 Part 7</a>- Dynamic SVG Coordinate Space Using D3.</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3basic-d3-array-utilitiesd3.html" rel="nofollow" target="_blank">D3 Part 8</a>- Basic D3 Array Utilities.</li>
<li><a href="https://www.interfacecreator.com/2018/11/svg-group-element-and-d3d3-part8.html" rel="nofollow" target="_blank">D3 Part 9</a>- SVG Group Element.</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3svg-text-element-d3d3-d3.html" rel="nofollow" target="_blank">D3 Part 10</a>- SVG Text Element.</li>
</ul>
<div style="text-align: center;">
<b>D3 Linear Scales</b><br />
<div style="text-align: left;">
In this lab,we will cover D3's Scales.Data to fit into our pre-defined SVG Coordinate space. D3 scales provides functions to perform data transformations.map an input data Domain and output range.simply D3 Scales takes an interval and transform it into new interval.</div>
<div style="text-align: left;">
Here We are going to experiment with below dataset.</div>
<div style="text-align: left;">
// Actual Data with largest values</div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
<blockquote class="tr_bq">
let Actualdata: number[] = [0, 100, 1000, 2500, 5000, 7500, 10000, 12500,15000, 17500,20000];</blockquote>
</div>
<div style="text-align: left;">
<i>Steps to follow without d3 to find linear scale</i></div>
<div style="text-align: left;">
<b>Step 1 : Largest number function</b></div>
<div style="text-align: left;">
<blockquote class="tr_bq">
getlargestnumber(data: Array<number>): number {<br />
let largestnum:number;<br />
let indexofdata:number=0<br />
for(indexofdata = 0; indexofdata<data.length; indexofdata++ ) {<br />
if (largestnum === undefined) {<br />
largestnum= data[indexofdata];<br />
}<br />
if (largestnum < data[indexofdata]) {<br />
largestnum=data[indexofdata];<br />
}<br />
}<br />
return largestnum;<br />
}</blockquote>
</div>
<div style="text-align: left;">
<b>Step 2 : Smallest number function</b></div>
<div style="text-align: left;">
<blockquote class="tr_bq">
getsmallestnumber(data: Array<number>): number {<br />
let smallestnum:number;<br />
let indexofdata:number=0<br />
for(indexofdata = 0; indexofdata<data.length; indexofdata++ ) {<br />
if (smallestnum === undefined) {<br />
smallestnum= data[indexofdata];<br />
}<br />
if (smallestnum > data[indexofdata]) {<br />
smallestnum=data[indexofdata];<br />
}<br />
}<br />
return smallestnum;<br />
} </blockquote>
</div>
<div style="text-align: left;">
<b>Step 3 : find the largest number </b></div>
<div style="text-align: left;">
<blockquote class="tr_bq">
let largestnum:number;<br />
largestnum=this.getlargestnumber(Actualdata);</blockquote>
</div>
<div style="text-align: left;">
<b>Step 4 : find the Smallest number</b></div>
<div style="text-align: left;">
<blockquote class="tr_bq">
let smallestnum:number;<br />
smallestnum=this.getsmallestnumber(Actualdata);</blockquote>
</div>
<div style="text-align: left;">
<b>Step 5 : find the Difference b/w intervals (Difference b/w intervals 20000-0)</b></div>
<div style="text-align: left;">
<blockquote class="tr_bq">
let interval = largestnum-smallestnum;</blockquote>
</div>
<div style="text-align: left;">
<b>Step 6: Define the new scaling value </b></div>
<div style="text-align: left;">
<blockquote class="tr_bq">
let scalingnumber=100; </blockquote>
</div>
<div style="text-align: left;">
<b>Step 7:Find the Largest number new interval</b></div>
<div style="text-align: left;">
<blockquote class="tr_bq">
let newlargestnum = largestnum/scalingnumber;</blockquote>
</div>
<div style="text-align: left;">
<b>Step 8: Find the new interval dataset</b></div>
<div style="text-align: left;">
<blockquote class="tr_bq">
let newdata: number[] =Actualdata;<br />
let indexofnewdata:number=0<br />
for(indexofnewdata = 0; indexofnewdata<newdata.length; indexofnewdata++ ) {<br />
newdata[indexofnewdata]=newdata[indexofnewdata]/scalingnumber;<br />
}</blockquote>
</div>
<div style="text-align: left;">
this entire process is called linear scaling y = mx + b.</div>
<div style="text-align: left;">
We got new interval dataset as below </div>
<div style="text-align: left;">
[0, 1, 10, 25, 50, 75, 100, 125, 150, 175, 200]</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<h3 style="text-align: center;">
<b>Using D3 scaleLinear</b></h3>
</div>
<div style="text-align: left;">
<b>Step 1: Find the Largest number using d3.max</b></div>
<div style="text-align: left;">
<blockquote class="tr_bq">
let d3largestnum = d3.max(Actualdata);</blockquote>
</div>
<div style="text-align: left;">
<b>Step 2: Find the Smallest number using d3.max</b></div>
<div style="text-align: left;">
<blockquote class="tr_bq">
let d3smallestnum = d3.min(Actualdata);</blockquote>
</div>
<div style="text-align: left;">
<b>Step 3: use d3's scaleLinear domain and range </b></div>
<div style="text-align: left;">
<blockquote class="tr_bq">
var d3linearScale = d3.scaleLinear().domain([d3smallestnum,d3largestnum]).range([0,200]);</blockquote>
</div>
<div style="text-align: left;">
<b>Step 4: Apply scale linear to find the new interval</b></div>
<div style="text-align: left;">
<blockquote class="tr_bq">
let d3newdata: number[] =[];<br />
let indexofd3newdata: number;<br />
indexofd3newdata =0;<br />
console.log(Actualdata.length);<br />
for(indexofd3newdata = 0; indexofd3newdata<Actualdata.length; indexofd3newdata++ ) {<br />
d3newdata.push(d3linearScale(Actualdata[indexofd3newdata]));<br />
}<br />
console.log(d3newdata);</blockquote>
</div>
<div style="text-align: left;">
<b>We got new interval using d3 dataset as below </b></div>
<div style="text-align: left;">
[0, 1, 10, 25, 50, 75, 100, 125, 150, 175, 200]<br />
D3's scaleLinear makes scaling interval's to simple and more accurate.<br />
<br /></div>
<div style="text-align: left;">
<i>Code Action @<a href="https://stackblitz.com/edit/angulard31" target="_blank">StackBlitz</a></i></div>
</div>
</div>
</div>
interfacecreatorhttp://www.blogger.com/profile/16947662416981092039noreply@blogger.com1tag:blogger.com,1999:blog-6661979576348443348.post-38612914269046983972018-11-24T19:38:00.003+05:302018-11-24T23:19:06.688+05:30Angular 7 D3|SVG Text Element D3|D3| D3 Part10<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="clear: both; text-align: center;">
<b style="text-align: left;">SVG Text Element and D3</b></h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4fq7Oge9xLccfrErR_qG_-aP9tSVGWpjO0ByfeEuruu8z8mJfo7TM9PDQ9jQdki6UWg1R8ctYmke_LMXJoILCUSx9rfKVGRvare2iRTeIs0TNtvViT1Ep_V8HpdUZj7s48LwytdhQidij/s1600/D3+Text+Element.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4fq7Oge9xLccfrErR_qG_-aP9tSVGWpjO0ByfeEuruu8z8mJfo7TM9PDQ9jQdki6UWg1R8ctYmke_LMXJoILCUSx9rfKVGRvare2iRTeIs0TNtvViT1Ep_V8HpdUZj7s48LwytdhQidij/s400/D3+Text+Element.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Before we start to <b><i>SVG text Element and D3</i></b> refer<br />
<div>
<ul style="text-align: left;">
<li><a href="https://www.interfacecreator.com/2018/10/d3-chartangular-d3-chartd3-bar.html" rel="nofollow" target="_blank">D3 Part 1</a> - SVG Shapes.</li>
<li><a href="https://www.interfacecreator.com/2018/10/d3-lab-with-angular-7d3-setupd3-with.html" rel="nofollow" target="_blank">D3 Part 2</a>- D3 + Angular 7 Integration .</li>
<li><a href="https://www.interfacecreator.com/2018/10/d3-lab-with-angular-7d3-data-bound-to.html" rel="nofollow" target="_blank">D3 Part 3</a>- D3 Data Bound to DOM Elements.</li>
<li><a href="https://www.interfacecreator.com/2018/10/d3-lab-with-angular-7d3-data-bound-to.html" rel="nofollow" target="_blank">D3 Part 4</a>- D3 Creating SVG Elements Based on Data.</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3-d3-svg-coordinate-spaced3.html" rel="nofollow" target="_blank">D3 Part 5</a>- D3 SVG Coordinate Space.</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3-d3-svg-coordinate-spaced3.html" rel="nofollow" target="_blank">D3 Part 6</a>- Data Structures Using D3.</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3dynamic-svg-coordinate.html" rel="nofollow" target="_blank">D3 Part 7</a>- Dynamic SVG Coordinate Space Using D3.</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3dynamic-svg-coordinate.html" rel="nofollow" target="_blank">D3 Part 8</a>- Basic D3 Array Utilities.</li>
<li><a href="https://www.interfacecreator.com/2018/11/svg-group-element-and-d3d3-part8.html" target="_blank">D3 Part 9</a>- SVG Group Element.</li>
</ul>
<div style="text-align: center;">
<b>SVG Text Element and D3</b><br />
<div style="text-align: left;">
In this Lab, We will cover the SVG's Text Element.The <text> element is used to define a text.<br />
To Write a text inside the SVG<br />
<blockquote class="tr_bq">
<svg height="30" width="200"><br />
<text x="0" y="15" fill="blue">Welcome to the SVG Basic's</text><br />
</svg></blockquote>
We will experiment with how the text element is going to use as label using D3?<br />
<b>Step 1:</b> Create a div with id circleelementdatabound in html template<br />
<blockquote class="tr_bq">
<div id="circleelementdatabound" ></div></blockquote>
<b>Step 2:</b> Import D3 in required component.ts<br />
<blockquote class="tr_bq">
import * as d3 from 'd3';</blockquote>
<b>Step 3:</b> Create user defined class<br />
<blockquote class="tr_bq">
export class D3lab10 {<br />
public xpos: number = 0;<br />
public ypos: number = 0;<br />
public radious: number = 0;<br />
public highlight: string ='';<br />
public label: string ='';<br />
}</blockquote>
<b>Step 4:</b> Create a dataset as below<br />
<blockquote class="tr_bq">
export const lab10data:D3lab10[] = [<br />
{ xpos: 0,ypos: 0,radious: 0,highlight: 'red',label: ''},<br />
{ xpos: 0,ypos: 0,radious: 0,highlight: 'red',label: ''},<br />
{ xpos: 0,ypos: 0,radious: 0,highlight: 'red',label: ''},<br />
];</blockquote>
<b>Step 5:</b> Inside ngOnInit() method write the below code<br />
<b><i>// Div element selected from angular's Component</i></b><br />
<blockquote class="tr_bq">
let divcircleelementdatabound = d3.select('#circleelementdatabound');<br />
// svg element added inside the selected div element<br />
let svgforcircleelements = divcircleelementdatabound.append('svg')<br />
.attr('width', 1000)<br />
.attr('height', 500);</blockquote>
<b><i>// Dynamic coordinate space</i></b><br />
<blockquote class="tr_bq">
let firstdata: D3lab10 = lab10data[0];<br />
firstdata.xpos = 20;<br />
firstdata.ypos = 20;<br />
firstdata.radious = 10;<br />
firstdata.label = '('+firstdata.xpos+','+firstdata.ypos+')';<br />
for (let i = 1; i < lab10data.length; i++){<br />
let prev: D3lab10 = lab10data[i-1];<br />
let current: D3lab10 = lab10data[i];<br />
current.radious = 10;<br />
current.xpos = prev.xpos+50;<br />
current.ypos = prev.ypos+50;<br />
current.label = '('+current.xpos+','+current.ypos+')';<br />
}</blockquote>
<b><i>// Apply the Data set to svgforcircleelements</i></b><br />
<blockquote class="tr_bq">
let bluecircleelements = svgforcircleelements.selectAll('circle')<br />
.data(lab10data)<br />
.enter()<br />
.append('circle')<br />
.attr('cx', function (d) { return d.xpos; })<br />
.attr('cy', function (d) { return d.ypos;})<br />
.attr('r',function (d) { return d.radious;})<br />
.attr('stroke','black')<br />
.attr('stroke-width','2')<br />
.style('fill', 'blue');</blockquote>
<b><i>// append text </i></b><br />
<blockquote class="tr_bq">
let textements = svgforcircleelements.selectAll('text')<br />
.data(lab10data)<br />
.enter()<br />
.append('text')<br />
.attr('x', function (d) { return d.xpos; })<br />
.attr('y', function (d) { return d.ypos;})<br />
.text(function(d) {return d.label;})<br />
.attr('font-family', 'sans-serif')<br />
.attr('font-size', '20px')<br />
.attr('fill', 'red');<br />
}</blockquote>
<b>Step 6:</b> Run the Project and see the result<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidmfjgpEJn8Toh-_biP4tUBiaAQS6v_EhSzzBFAXVfVpgQXl8IKKuOemEm12vAE9FFxPkvpsGG-UaTfXhcWOfVhWhyzhOPhjQKRDMDK7UFgfE8nFTX3rkgdT6DiJUWm_G1MLQBVZUcGrSZ/s1600/Output.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="318" data-original-width="475" height="214" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidmfjgpEJn8Toh-_biP4tUBiaAQS6v_EhSzzBFAXVfVpgQXl8IKKuOemEm12vAE9FFxPkvpsGG-UaTfXhcWOfVhWhyzhOPhjQKRDMDK7UFgfE8nFTX3rkgdT6DiJUWm_G1MLQBVZUcGrSZ/s320/Output.png" width="320" /></a></div>
<i>Code Action @<a href="https://stackblitz.com/edit/angulard31" target="_blank">StackBlitz</a></i></div>
</div>
</div>
</div>
interfacecreatorhttp://www.blogger.com/profile/16947662416981092039noreply@blogger.com0tag:blogger.com,1999:blog-6661979576348443348.post-20838416391905262592018-11-22T19:58:00.002+05:302018-11-24T17:53:20.712+05:30Angular 7 D3|SVG Group Element and D3|D3| D3 Part9<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="clear: both; text-align: center;">
<b style="text-align: left;">SVG Group Element and D3</b></h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAkgTpoLBQRMf8fI5m1tRfzhyesm-mzPKPKzPZuOvhHXcBAQysH8r6WJU40QVnC_1jEssTz8zfqGyl5YIsdjOHTOvYBxaOKuNGX2SiRh8c7vgGhcdRzdDDs0gJeKabYwx2xKhvVFWyOgBQ/s1600/SVG+Group+Element+and+D3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAkgTpoLBQRMf8fI5m1tRfzhyesm-mzPKPKzPZuOvhHXcBAQysH8r6WJU40QVnC_1jEssTz8zfqGyl5YIsdjOHTOvYBxaOKuNGX2SiRh8c7vgGhcdRzdDDs0gJeKabYwx2xKhvVFWyOgBQ/s400/SVG+Group+Element+and+D3.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Before we start to <b><i>SVG Group Element and D3</i></b> refer<br />
<div>
<ul style="text-align: left;">
<li><a href="https://www.interfacecreator.com/2018/10/d3-chartangular-d3-chartd3-bar.html" rel="nofollow" target="_blank">D3 Part 1</a> - SVG Shapes.</li>
<li><a href="https://www.interfacecreator.com/2018/10/d3-lab-with-angular-7d3-setupd3-with.html" rel="nofollow" target="_blank">D3 Part 2</a>- D3 + Angular 7 Integration .</li>
<li><a href="https://www.interfacecreator.com/2018/10/d3-lab-with-angular-7d3-data-bound-to.html" rel="nofollow" target="_blank">D3 Part 3</a>- D3 Data Bound to DOM Elements.</li>
<li><a href="https://www.interfacecreator.com/2018/10/d3-lab-with-angular-7d3-data-bound-to.html" rel="nofollow" target="_blank">D3 Part 4</a>- D3 Creating SVG Elements Based on Data.</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3-d3-svg-coordinate-spaced3.html" rel="nofollow" target="_blank">D3 Part 5</a>- D3 SVG Coordinate Space.</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3-d3-svg-coordinate-spaced3.html" rel="nofollow" target="_blank">D3 Part 6</a>- Data Structures Using D3.</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3dynamic-svg-coordinate.html" rel="nofollow" target="_blank">D3 Part 7</a>- Dynamic SVG Coordinate Space Using D3.</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3dynamic-svg-coordinate.html" rel="nofollow" target="_blank">D3 Part 8</a>- Basic D3 Array Utilities.</li>
</ul>
<div style="text-align: center;">
<b>SVG Group Element and D3</b><br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
In this lab we will understand the SVG group element</div>
<div style="text-align: left;">
The SVG Group Element is a container that contains all child SVG elements defined inside of it.The SVG Group Element is defined by <i><g> and </g>.</i></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<b>Major Use of SVG Group element is </b></div>
<div style="text-align: left;">
</div>
<ol style="text-align: left;">
<li>Grouping -To group a set of SVG elements that share the same attribute.</li>
<li>Transforming - To define a new coordinate system for a set of SVG elements by applying a transformation to each coordinate specified in this set of SVG elements.</li>
</ol>
<br />
<div style="text-align: left;">
<i>For Experiment starts with 3 Red Circles and 3 blue circles.</i></div>
<div style="text-align: left;">
<b>Step 1</b>: Create a div with id circleelementdatabound in html template</div>
<blockquote class="tr_bq" style="text-align: left;">
<div id="circleelementdatabound" ></div></blockquote>
<div style="text-align: left;">
<b>Step 2</b>: Import D3 in required component.ts</div>
<blockquote class="tr_bq" style="text-align: left;">
import * as d3 from 'd3';</blockquote>
<div style="text-align: left;">
<b>Step 3</b>:Create user defined class</div>
<blockquote class="tr_bq" style="text-align: left;">
export class D3lab9 {<br />
public xpos: number = 0;<br />
public ypos: number = 0;<br />
public radious: number = 0;<br />
public highlight: string ='';<br />
}</blockquote>
<div style="text-align: left;">
<b>Step 4</b>:Create 2 different dataset as below </div>
<blockquote class="tr_bq" style="text-align: left;">
export const lab9dataredcircle:D3lab9[] = [<br />
{ xpos: 0,ypos: 0,radious: 0,highlight: 'red'},<br />
{ xpos: 0,ypos: 0,radious: 0,highlight: 'red'},<br />
{ xpos: 0,ypos: 0,radious: 0,highlight: 'red'},<br />
];<br />
export const lab9databluecircle:D3lab9[] = [<br />
{ xpos: 0,ypos: 0,radious: 0,highlight: 'red'},<br />
{ xpos: 0,ypos: 0,radious: 0,highlight: 'red'},<br />
{ xpos: 0,ypos: 0,radious: 0,highlight: 'red'},<br />
];</blockquote>
<div style="text-align: left;">
<b>Step 5</b>: Inside ngOnInit() method write the below code </div>
<div style="text-align: left;">
// Div element selected from angular's Component</div>
<blockquote class="tr_bq" style="text-align: left;">
let divcircleelementdatabound = d3.select('#circleelementdatabound');</blockquote>
<div style="text-align: left;">
// svg element added inside the selected div element</div>
<blockquote class="tr_bq" style="text-align: left;">
let svgforcircleelements = divcircleelementdatabound.append('svg')<br />
.attr('width', 1000)<br />
.attr('height', 500);</blockquote>
<div style="text-align: left;">
<i>//We add the SVG Group Element Transform Here</i></div>
<blockquote class="tr_bq" style="text-align: left;">
var bluecircleGroup = svgforcircleelements.append('g').attr('transform', 'translate(100,5)');</blockquote>
<div style="text-align: left;">
//Below Code For Dynamic Space </div>
<blockquote class="tr_bq" style="text-align: left;">
let firstdata: D3lab9 = lab9databluecircle[0];<br />
firstdata.xpos = 20;<br />
firstdata.ypos = 20;<br />
firstdata.radious = 10;<br />
for (let i = 1; i < lab9databluecircle.length; i++) {<br />
let prev: D3lab9 = lab9databluecircle[i-1];<br />
let current: D3lab9 = lab9databluecircle[i];<br />
current.radious = 10;<br />
current.xpos = prev.xpos+50;<br />
current.ypos = prev.ypos+50;<br />
}</blockquote>
<div style="text-align: left;">
<i>//Using bluecircle dataset applied inside the bluecircleGroup with transform translate x= 100,y =5</i></div>
<blockquote class="tr_bq" style="text-align: left;">
let circleelements = bluecircleGroup.selectAll('circle')<br />
.data(lab9databluecircle)<br />
.enter()<br />
.append('circle')<br />
.attr('cx', function (d) { return d.xpos; })<br />
.attr('cy', function (d) { return d.ypos;})<br />
.attr('r',function (d) { return d.radious;})<br />
.attr('stroke','black')<br />
.attr('stroke-width','2')<br />
.style('fill', 'blue');</blockquote>
<div style="text-align: left;">
<i><b>Once the above code applied the 3 circles derived from lab9databluecircle dataset & circles are created inside the bluecircleGroup <g></g> element.bluecircleGroup is a group element and it has attribute transform with value translate(100,5). so the entire group moved to the new position of x=100,y=5.</b></i></div>
<div style="text-align: left;">
<i>//We red circle add the SVG Group Element Transform Here translate(<x> [<y>])</i></div>
<blockquote class="tr_bq" style="text-align: left;">
var redcircleGroup = svgforcircleelements.append('g').attr('transform', 'translate(200,5)'); </blockquote>
<div style="text-align: left;">
<i>// Dynamic Space </i></div>
<blockquote class="tr_bq" style="text-align: left;">
let redfirstdata: D3lab9 = lab9dataredcircle[0];<br />
redfirstdata.xpos = 20;<br />
redfirstdata.ypos = 20;<br />
redfirstdata.radious = 10;<br />
for (let i = 1; i < lab9dataredcircle.length; i++) {<br />
let prev: D3lab9 = lab9dataredcircle[i-1];<br />
let current: D3lab9 = lab9dataredcircle[i];<br />
current.radious = 10;<br />
current.xpos = prev.xpos+50;<br />
current.ypos = prev.ypos+50;<br />
}</blockquote>
<div style="text-align: left;">
<i>//Red Cicle Creation</i></div>
<blockquote class="tr_bq" style="text-align: left;">
let redcircleelements = redcircleGroup.selectAll('circle')<br />
.data(lab9dataredcircle)<br />
.enter()<br />
.append('circle')<br />
.attr('cx', function (d) { return d.xpos; })<br />
.attr('cy', function (d) { return d.ypos;})<br />
.attr('r',function (d) { return d.radious;})<br />
.attr('stroke','black')<br />
.attr('stroke-width','2')<br />
.style('fill', 'red');</blockquote>
<div style="text-align: left;">
<i><b>Step 6</b>: Run the project and see the result</i></div>
</div>
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3gpqz_C7LQutKgrZkhzRhjn4cvYp5B2lkr1dCiLuEg8FlbGX_O_BxIGKGVmlskbkZfB2PYW2gX00UI_eCQfbYBN5M4XvZDggRArIl4vx1GDAOTx9pYTcmZ0I2lmxcfZtV09kMnZVXXy4e/s1600/SVGGroupElement+Dom+View.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="159" data-original-width="861" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3gpqz_C7LQutKgrZkhzRhjn4cvYp5B2lkr1dCiLuEg8FlbGX_O_BxIGKGVmlskbkZfB2PYW2gX00UI_eCQfbYBN5M4XvZDggRArIl4vx1GDAOTx9pYTcmZ0I2lmxcfZtV09kMnZVXXy4e/s640/SVGGroupElement+Dom+View.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">SVGGroupElement Dom View</td></tr>
</tbody></table>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: left;">
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: 1em; margin-right: 1em; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtq6GFOzvA0hU1wPLhzmYBf9mGq1dhDOCwWDJIV4lWWtRkSVTL3KW7MRTPCGQ-670YPWjugMaUx8hHqbcuWkqM9chh2jTh8WFqJKxLoaUKr_feZyBXcrzpIiMGDbLeGngxQUlZGv4kTs8C/s1600/output.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="261" data-original-width="398" height="261" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtq6GFOzvA0hU1wPLhzmYBf9mGq1dhDOCwWDJIV4lWWtRkSVTL3KW7MRTPCGQ-670YPWjugMaUx8hHqbcuWkqM9chh2jTh8WFqJKxLoaUKr_feZyBXcrzpIiMGDbLeGngxQUlZGv4kTs8C/s400/output.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i style="font-size: medium; text-align: left;">transform translate applied to SVG group element</i></td></tr>
</tbody></table>
<div style="text-align: left;">
<i>Code Action @ <a href="https://stackblitz.com/edit/angulard31" rel="nofollow" target="_blank">Stackblitz</a></i></div>
<div style="text-align: left;">
<br /></div>
</div>
interfacecreatorhttp://www.blogger.com/profile/16947662416981092039noreply@blogger.com0tag:blogger.com,1999:blog-6661979576348443348.post-24003492814761421122018-11-19T23:20:00.002+05:302018-11-24T17:53:57.080+05:30Angular 7 D3|Basic D3 Array Utilities|D3| D3 Part8<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
<h2 style="text-align: center;">
Basic D3 Array Utilities </h2>
<h2 style="text-align: center;">
<b><div class="separator" style="clear: both;">
</div>
</b></h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy1lGZMR2vCl79ENtHnengkXQRo15-mSKgb2MZVWRMMkCEA8edevPTzDUfCA-t_esM6nVqFf_zeZRQ-HUnMAmvpS2Mal6IcCM7G1gr8yykBQGFllVshRN5yDiU1cHY4Y3hF5IR1GdM383Y/s1600/D3ArrayUtilities.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy1lGZMR2vCl79ENtHnengkXQRo15-mSKgb2MZVWRMMkCEA8edevPTzDUfCA-t_esM6nVqFf_zeZRQ-HUnMAmvpS2Mal6IcCM7G1gr8yykBQGFllVshRN5yDiU1cHY4Y3hF5IR1GdM383Y/s400/D3ArrayUtilities.png" width="400" /></a></div>
<br />
Before we start to <b><i>Basic D3 Array Utilities</i></b> refer</div>
<div>
<ul style="text-align: left;">
<li><a href="https://www.interfacecreator.com/2018/10/d3-chartangular-d3-chartd3-bar.html" target="_blank">D3 Part 1</a> - SVG Shapes</li>
<li><a href="https://www.interfacecreator.com/2018/10/d3-lab-with-angular-7d3-setupd3-with.html" rel="nofollow" target="_blank">D3 Part 2</a>- D3 + Angular 7 Integration </li>
<li><a href="https://www.interfacecreator.com/2018/10/d3-lab-with-angular-7d3-data-bound-to.html" rel="nofollow" target="_blank">D3 Part 3</a>- D3 Data Bound to DOM Elements</li>
<li><a href="https://www.interfacecreator.com/2018/10/d3-lab-with-angular-7d3-data-bound-to.html" rel="nofollow" target="_blank">D3 Part 4</a>- D3 Creating SVG Elements Based on Data</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3-d3-svg-coordinate-spaced3.html" rel="nofollow" target="_blank">D3 Part 5</a>- D3 SVG Coordinate Space</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3-d3-svg-coordinate-spaced3.html" rel="nofollow" target="_blank">D3 Part 6</a>- Data Structures Using D3</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3dynamic-svg-coordinate.html" rel="nofollow" target="_blank">D3 Part 7</a>- Dynamic SVG Coordinate Space Using D3</li>
<li><a href="https://www.interfacecreator.com/2018/09/typescript-array-type-script-type-test.html" rel="nofollow" target="_blank">Array</a> - Basics Type Script Array </li>
</ul>
<div>
<div style="text-align: center;">
<span style="text-align: left;"><b>Basic D3 Array Utilities</b></span><br />
<br />
<div style="text-align: left;">
D3 provides below basic Array functionalities to improve programming efficiency.</div>
<ol style="text-align: left;">
<li>d3.min</li>
<li>d3.max</li>
<li>d3.extent</li>
<li>d3.sum</li>
<li>d3.mean</li>
<li>d3.median</li>
</ol>
<div style="text-align: left;">
<b>Step 1</b>: create a numeric dataset (array).</div>
<div style="text-align: left;">
<blockquote class="tr_bq">
public min: number;<br />
public max: number;<br />
public extent: Array<number>;<br />
public sum: number;<br />
public mean: number;<br />
public median: number;<br />
public dataset: Array<number> = [1,2,3,4,5,6,100,-89];</blockquote>
<div>
<b>Step 2</b>: Import d3 to the required component.</div>
<div>
<blockquote class="tr_bq">
import * as d3 from 'd3';</blockquote>
</div>
<div>
<br /></div>
</div>
<div style="text-align: left;">
<b>Step 3</b>: experiment with d3's array utilities.</div>
<div style="text-align: left;">
<b>d3.min</b></div>
<div style="text-align: left;">
it returns the least value of the array using natural order.</div>
<div style="text-align: left;">
<blockquote class="tr_bq">
findmin() {<br />
this.min = d3.min(this.dataset);<br />
}</blockquote>
</div>
<div style="text-align: left;">
<b>d3.max</b></div>
<div style="text-align: left;">
D3.max returns the maximum value of the given array using natural order.</div>
<div style="text-align: left;">
<blockquote>
findmax() {<br />
this.max = d3.max(this.dataset);<br />
}</blockquote>
</div>
<div style="text-align: left;">
<b>d3.extent</b></div>
<div style="text-align: left;">
extent returns an array with minimum and maximum values of the given array using natural order.</div>
<div style="text-align: left;">
<blockquote>
findextent(){<br />
this.extent = d3.extent(this.dataset);<br />
}</blockquote>
</div>
<div style="text-align: left;">
<div>
<b>d3.sum</b></div>
<div>
sum returns summation of the given array.</div>
<div>
<blockquote>
findsum(){<br />
this.sum = d3.sum(this.dataset);<br />
}</blockquote>
</div>
<div>
<b>d3.mean</b></div>
<div>
mean returns mean of the given array.</div>
<div>
<blockquote>
findmean(){<br />
this.mean = d3.mean(this.dataset);<br />
}</blockquote>
</div>
<div>
<div>
<b>d3.median</b></div>
<div>
mean returns median of the given array.</div>
</div>
<div>
<blockquote>
findmedian(){<br />
this.median= d3.median(this.dataset);<br />
}</blockquote>
</div>
<div>
<b>OutPut</b></div>
<div>
Run the project and see the result</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ-RPdlxjvWJF4cVII0V0LIK11yzjojEtpYyhev7J01KDvLys1r3C_EiG7v7sws7nFZWKoBJ3FszQ-YfqYGe7EVTBwrQ7SMoemcv-md2Hvknpz_gun0GpGB5fnWE6W_yfbX0_xt8oopwm4/s1600/D3+Array+Utilities.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="370" data-original-width="496" height="297" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ-RPdlxjvWJF4cVII0V0LIK11yzjojEtpYyhev7J01KDvLys1r3C_EiG7v7sws7nFZWKoBJ3FszQ-YfqYGe7EVTBwrQ7SMoemcv-md2Hvknpz_gun0GpGB5fnWE6W_yfbX0_xt8oopwm4/s400/D3+Array+Utilities.png" width="400" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Code Action <i><b>@<a href="https://stackblitz.com/edit/angulard31" rel="nofollow" target="_blank">stackblitz</a></b></i></div>
<div>
<b><br /></b></div>
</div>
</div>
</div>
</div>
</div>
interfacecreatorhttp://www.blogger.com/profile/16947662416981092039noreply@blogger.com0tag:blogger.com,1999:blog-6661979576348443348.post-55685032079570425772018-11-17T21:40:00.004+05:302018-11-19T15:25:57.251+05:30Angular 7 D3|Dynamic SVG Coordinate Space Using D3|D3| D3 Part7<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
<h2 style="text-align: center;">
Dynamic SVG Coordinate Space<b> Using D3</b></h2>
<h2 style="text-align: center;">
<b><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEWmVHkQPr_7_hQiUPaoABjU3OeeQ_0US7gZOU0neYh33u_uPG0J7IK8U8e90d_z99nyzco8rjzTnFjrWTlLeJWMJBC2yxbST2Gzm3au5n4mzOHIzV9qvw4ZzWu0AZInsqau5xA5AbC3Z-/s1600/SVGBasicShapesUsingD3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="768" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEWmVHkQPr_7_hQiUPaoABjU3OeeQ_0US7gZOU0neYh33u_uPG0J7IK8U8e90d_z99nyzco8rjzTnFjrWTlLeJWMJBC2yxbST2Gzm3au5n4mzOHIzV9qvw4ZzWu0AZInsqau5xA5AbC3Z-/s400/SVGBasicShapesUsingD3.png" width="400" /></a></div>
</b></h2>
Before we start to <b><i>SVG Basic Shapes Using D3</i></b> refer</div>
<div>
<ul style="text-align: left;">
<li><a href="https://www.interfacecreator.com/2018/10/d3-chartangular-d3-chartd3-bar.html" target="_blank">D3 Part 1</a> - SVG Shapes</li>
<li><a href="https://www.interfacecreator.com/2018/10/d3-lab-with-angular-7d3-setupd3-with.html" rel="nofollow" target="_blank">D3 Part 2</a>- D3 + Angular 7 Integration </li>
<li><a href="https://www.interfacecreator.com/2018/10/d3-lab-with-angular-7d3-data-bound-to.html" rel="nofollow" target="_blank">D3 Part 3</a>- D3 Data Bound to DOM Elements</li>
<li><a href="https://www.interfacecreator.com/2018/10/d3-lab-with-angular-7d3-data-bound-to.html" target="_blank">D3 Part 4</a>- D3 Creating SVG Elements Based on Data</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3-d3-svg-coordinate-spaced3.html" target="_blank">D3 Part 5</a>- D3 SVG Coordinate Space</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3-d3-svg-coordinate-spaced3.html" target="_blank">D3 Part 6</a>- Data Structures Using D3</li>
</ul>
<div>
<div style="text-align: center;">
<span style="text-align: left;"><b>Dynamic SVG Coordinate Space</b></span></div>
<br />
In This Lab We will explain Dynamic space using D3 Data. Here we adjusting xpos and ypos with the help of for loop<br />
<b><i>Step 1: In Html template </i></b><br />
<blockquote class="tr_bq">
<div id="circleelementdatabound" ></div></blockquote>
<b><i>Step 2: Create Type using typecript class</i></b><br />
<blockquote class="tr_bq">
export class D3lab7 {<br />
public xpos: number = 0;<br />
public ypos: number = 0;<br />
public radious: number = 0;<br />
public highlight: string ='';<br />
}</blockquote>
<b><i>Step 3: Create Data Set As Array of D3lab7</i></b><br />
<blockquote class="tr_bq">
export const lab7data:D3lab7[] = [<br />
{ xpos: 0,ypos: 0,radious: 0,highlight: 'red'},<br />
{ xpos: 0,ypos: 0,radious: 0,highlight: 'green'},<br />
{ xpos: 0,ypos: 0,radious: 0,highlight: 'yellow'},<br />
{ xpos: 0,ypos: 0,radious: 0,highlight: 'white'},<br />
{ xpos: 0,ypos: 0,radious: 0,highlight: 'orange'},<br />
];</blockquote>
<b><i>Step 4: Import D3 at required Component</i></b><br />
<blockquote class="tr_bq">
import * as d3 from 'd3';</blockquote>
<b><i>Step 5: Apply below code on ngOnInit method </i></b><br />
<i>//Div element selected from angular's Component</i><br />
<blockquote class="tr_bq">
let divcircleelementdatabound = d3.select('#circleelementdatabound');</blockquote>
<i>//svg element added inside the selected div element</i><br />
<blockquote class="tr_bq">
let svgforcircleelements = divcircleelementdatabound.append('svg')<br />
.attr('width', 500)<br />
.attr('height', 500);<br />
//Set First Element Position<br />
let firstdata: D3lab7 = lab7data[0];<br />
firstdata.xpos = 25;<br />
firstdata.ypos = 25;<br />
firstdata.radious = 10;<br />
//Dynamic Position<br />
for (let i = 1; i < lab7data.length; i++) {<br />
let prev: D3lab7 = lab7data[i-1];<br />
let current: D3lab7 = lab7data[i];<br />
current.radious = 10;<br />
current.xpos = prev.xpos + (current.radious*2);<br />
current.ypos = prev.ypos + (current.radious*2);<br />
}</blockquote>
<i>//Apply Data set to to create circle using D3 for Dynamic SVG Coordinate</i><br />
<blockquote class="tr_bq">
let circleelements = svgforcircleelements.selectAll('circle')<br />
.data(lab7data)<br />
.enter()<br />
.append('circle')<br />
.attr('cx', function (d) { return d.xpos; })<br />
.attr('cy', function (d) { return d.ypos;})<br />
.attr('r',function (d) { return d.radious;})<br />
.attr('stroke','black')<br />
.attr('stroke-width','2')<br />
.style('fill', function (d) { return d.highlight;});<br />
}</blockquote>
<br />
<i>Run the project and see the result.</i><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpfdOnMJRc2NPYFnGXxfVJRy36DQI2QmU11G9d8dsEsWQigVQ2XTZAbULm3-qRbnQaWQKhCz706SyKLhb6ZU-1IKmBrYuADWO8GIfpEq9d6iwdlH0oMBK2bs-0ecxwYtnCJjK3Ca5jFJxk/s1600/Output.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="291" data-original-width="541" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpfdOnMJRc2NPYFnGXxfVJRy36DQI2QmU11G9d8dsEsWQigVQ2XTZAbULm3-qRbnQaWQKhCz706SyKLhb6ZU-1IKmBrYuADWO8GIfpEq9d6iwdlH0oMBK2bs-0ecxwYtnCJjK3Ca5jFJxk/s320/Output.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Code Action @<a href="https://stackblitz.com/edit/angulard31" target="_blank">StackBlitz</a></div>
<i><br /></i></div>
</div>
</div>
interfacecreatorhttp://www.blogger.com/profile/16947662416981092039noreply@blogger.com0tag:blogger.com,1999:blog-6661979576348443348.post-12561840452820447092018-11-16T22:00:00.002+05:302018-11-17T09:28:32.485+05:30Angular 7 D3| Data Structures Using D3|D3| D3 Part6<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
<h2 style="clear: both; text-align: center;">
<span style="text-align: left;">Data Structures To SVG Elements Using D3</span></h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYQ1DvH6JOGqb3Cq7UvXxB7h61bOb4dyvgMRXVMK_mMDtHk1GayHoRw6azRDvLCvwZBUY4KH920-rgBBtCCTbqjar-TC18QJ8qrkmgeleILEkpzuULTPzw2aHCSNRkqPJsEDGctWnrlVcB/s1600/DataStructuresD3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYQ1DvH6JOGqb3Cq7UvXxB7h61bOb4dyvgMRXVMK_mMDtHk1GayHoRw6azRDvLCvwZBUY4KH920-rgBBtCCTbqjar-TC18QJ8qrkmgeleILEkpzuULTPzw2aHCSNRkqPJsEDGctWnrlVcB/s400/DataStructuresD3.png" width="400" /></a></div>
<br />
<br />
Before we start to <i><b>Apply Data Structures To SVG Elements Using D3</b></i> refer</div>
<div>
<ul style="text-align: left;">
<li><a href="https://www.interfacecreator.com/2018/10/d3-chartangular-d3-chartd3-bar.html" target="_blank">D3 Part 1</a> - SVG Shapes</li>
<li><a href="https://www.interfacecreator.com/2018/10/d3-lab-with-angular-7d3-setupd3-with.html" rel="nofollow" target="_blank">D3 Part 2</a>- D3 + Angular 7 Integration </li>
<li><a href="https://www.interfacecreator.com/2018/10/d3-lab-with-angular-7d3-data-bound-to.html" rel="nofollow" target="_blank">D3 Part 3</a>- D3 Data Bound to DOM Elements</li>
<li><a href="https://www.interfacecreator.com/2018/10/d3-lab-with-angular-7d3-data-bound-to.html" target="_blank">D3 Part 4</a>- D3 Creating SVG Elements Based on Data</li>
<li><a href="https://www.interfacecreator.com/2018/11/angular-7-d3-d3-svg-coordinate-spaced3.html" target="_blank">D3 Part 5</a>- D3 SVG Coordinate Space</li>
</ul>
<h3 style="text-align: center;">
<b>Data Structures To SVG Elements Using D3</b></h3>
</div>
<div>
<div>
<br /></div>
<div>
In this lab you will understand how to apply data structure to SVG elements using D3.</div>
<div>
What are the data structure available in Typescript?</div>
<div>
Stack,Queue,Array,Etc.</div>
<div>
Here We are going to apply array of user defined type to SVG element</div>
<h3 style="text-align: left;">
Create User Defined Type</h3>
<div>
Declare User Defined Type as below</div>
<blockquote class="tr_bq">
export class lab6type {<br />
public xpos: number = 0;<br />
public ypos: number = 0;<br />
public radious: number = 0;<br />
public highlight: string ='';<br />
}</blockquote>
<h3 style="text-align: left;">
Create DataSet </h3>
<blockquote class="tr_bq">
export const lab6data:lab6type[] = [<br />
{ xpos: 20,ypos: 20,radious: 10,highlight: 'red'},<br />
{ xpos: 40,ypos: 40,radious: 10,highlight: 'green'},<br />
{ xpos: 60,ypos: 60,radious: 10,highlight: 'yellow'},<br />
{ xpos: 80,ypos: 80,radious: 10,highlight: 'white'},<br />
{ xpos: 100,ypos: 100,radious: 10,highlight: 'orange'},<br />
];</blockquote>
<h3 style="text-align: left;">
In Component.ts</h3>
<div>
<b><i>Access circleelementdatabound using D3.Select</i></b></div>
<blockquote class="tr_bq">
let divcircleelementdatabound = d3.select('#circleelementdatabound');</blockquote>
<div>
<b><i>SVG element added inside the selected div element using D3 append method</i></b></div>
<blockquote class="tr_bq">
let svgforcircleelements = divcircleelementdatabound.append('svg')<br />
.attr('width', 500)<br />
.attr('height', 500);</blockquote>
<div>
<b><i>Apply the Dataset to D3 to create circle using D3 append data method</i></b></div>
<blockquote class="tr_bq">
let circleelements = svgforcircleelements.selectAll('circle')<br />
.data(lab6data)<br />
.enter()<br />
.append('circle')<br />
.attr('cx', function (d) { return d.xpos; })<br />
.attr('cy', function (d) { return d.ypos;})<br />
.attr('r',function (d) { return d.radious;})<br />
.attr('stroke','black')<br />
.attr('stroke-width','2')<br />
.style('fill', function (d) { return d.highlight;});</blockquote>
<div>
Run the project and see the result</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyLW8q1oRp6mVTWYoQCP4oS47itHiSv6P2wGFspgbw8p9k9erETJBqhQm5j5je6fGxc3w1d0Y8guVnZHa_w7TjpOrSn_Oeo4Bo-VX0omF5SEITGrj323eqfBqNEzhriFd5I1DhQ3gyOZlJ/s1600/output.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="280" data-original-width="496" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyLW8q1oRp6mVTWYoQCP4oS47itHiSv6P2wGFspgbw8p9k9erETJBqhQm5j5je6fGxc3w1d0Y8guVnZHa_w7TjpOrSn_Oeo4Bo-VX0omF5SEITGrj323eqfBqNEzhriFd5I1DhQ3gyOZlJ/s400/output.png" width="400" /></a></div>
<div>
Code Action @<i><a href="https://stackblitz.com/edit/angulard31" target="_blank">Stackblitz</a></i></div>
</div>
</div>
interfacecreatorhttp://www.blogger.com/profile/16947662416981092039noreply@blogger.com0tag:blogger.com,1999:blog-6661979576348443348.post-36565641212849320262018-11-15T15:24:00.002+05:302018-11-17T08:50:37.932+05:30Angular 7 D3| D3 SVG Coordinate Space|D3| D3 Part5<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
<h2 style="text-align: center;">
D3 SVG Coordinate Space</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX_RGTl4NJwzavmQJVsAQNuH7sLOxuJZVDfIyliS-QNNPoLqZ6cYqQIN8dhFDBzs2dGN16ypsl4upEP9cKjnecLAiWiI9sa5cFSJ76BX7RB9Ji9U1cuaLILHwMvavV02bxr20ZqBTZO_xg/s1600/SVGCoordinateSpace.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="712" data-original-width="1024" height="277" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX_RGTl4NJwzavmQJVsAQNuH7sLOxuJZVDfIyliS-QNNPoLqZ6cYqQIN8dhFDBzs2dGN16ypsl4upEP9cKjnecLAiWiI9sa5cFSJ76BX7RB9Ji9U1cuaLILHwMvavV02bxr20ZqBTZO_xg/s400/SVGCoordinateSpace.png" width="400" /></a></div>
<br />
Before we start D3 SVG Coordinate Space refer </div>
<div>
<ul style="text-align: left;">
<li><a href="https://www.interfacecreator.com/2018/10/d3-chartangular-d3-chartd3-bar.html" target="_blank">D3 Part 1</a> - SVG Shapes</li>
<li><a href="https://www.interfacecreator.com/2018/10/d3-lab-with-angular-7d3-setupd3-with.html" rel="nofollow" target="_blank">D3 Part 2</a>- D3 + Angular 7 Integration </li>
<li><a href="https://www.interfacecreator.com/2018/10/d3-lab-with-angular-7d3-data-bound-to.html" rel="nofollow" target="_blank">D3 Part 3</a>- D3 Data Bound to DOM Elements</li>
<li><a href="https://www.interfacecreator.com/2018/10/d3-lab-with-angular-7d3-data-bound-to.html" target="_blank">D3 Part 4</a>- D3 Creating SVG Elements Based on Data</li>
</ul>
<h3 style="text-align: center;">
D3 SVG Coordinate Space </h3>
</div>
<div>
Like graph we can define the SVG elements coordinates.Using D3.js to add SVG elements to specific coordinates in a graph based on data.<br />
<br />
<h3 style="text-align: left;">
Coordinates Data-set</h3>
// Data set Created for circle elements radious<br />
let coordinatesDS= [50, 100, 150,200,250,300,350];<br />
SVG Circle Element Coordinate Space without using D3 refer <a href="https://www.w3schools.com/graphics/svg_circle.asp" target="_blank">W3schools </a><br />
<h3 style="text-align: left;">
Basic Coordinate Attributes are</h3>
cx: x-axis coordinate of the center of the circle.<br />
cy: y-axis coordinate of the center of the circle.<br />
<br />
<b>without d3</b>, how actually cx and cy works with svg let's see the below example<br />
<blockquote class="tr_bq">
// example code<br />
<div id="circleelement" ><br />
<svg height="200" width="200"><br />
<circle cx="50" cy="50" r="25" stroke="yellow" stroke-width="5" /><br />
<circle cx="100" cy="100" r="25" stroke="yellow" stroke-width="5" /><br />
<circle cx="150" cy="150" r="25" stroke="yellow" stroke-width="5" /><br />
</svg><br />
</div></blockquote>
<h3 style="text-align: left;">
D3.js allows us to use a function in the "cx" and "cy" attributes.</h3>
// Div element selected from angular's Component<br />
<blockquote class="tr_bq">
let divcircleelementdatabound = d3.select('#circleelementdatabound');</blockquote>
// svg element added inside the selected div element<br />
<blockquote class="tr_bq">
let svgforcircleelements = divcircleelementdatabound.append('svg').attr('width', 500).attr('height', 500);</blockquote>
// Data set Created for circle elements radious<br />
<blockquote class="tr_bq">
let coordinatesDS= [50, 100, 150,200,250,300,350];<br />
// Coordinate Space using D3 function<br />
// D3.js allows us to use a function in the "cx" and "cy" attributes.<br />
let circleelements = svgforcircleelements.selectAll('circle')<br />
.data(coordinatesDS)<br />
.enter()<br />
.append('circle')<br />
.attr('cx', function (d) { return d; })<br />
.attr('cy', function (d) { return d; })<br />
.attr('r',20 )<br />
.attr('stroke','black')<br />
.attr('stroke-width','2')<br />
.style('fill', function (d) {<br />
if ( d === 50) {<br />
return 'red'<br />
}else if (d=== 100) { return 'green'}<br />
else if (d=== 150) { return 'blue'}<br />
else if (d=== 200) { return 'yellow'}<br />
else if (d=== 250) { return 'orange'}<br />
else if (d=== 300) { return 'purple'}<br />
else if (d=== 350) { return 'white'}<br />
});</blockquote>
<h3 style="text-align: left;">
Output</h3>
Run the project And see the result<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSHt90wPTJdiCfjg0pOTzCTVE2Mk7GoTgyJSA5qLAw3JOxFafEThphvLkl19VLvgeTeYGyPEG1IQVqsDdUPs5iY1yDBQtXvfsghBfXadNSTETNg-0HmzIE9ahf2qFSA5EF6WyC1lb93qu7/s1600/output.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="454" data-original-width="420" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSHt90wPTJdiCfjg0pOTzCTVE2Mk7GoTgyJSA5qLAw3JOxFafEThphvLkl19VLvgeTeYGyPEG1IQVqsDdUPs5iY1yDBQtXvfsghBfXadNSTETNg-0HmzIE9ahf2qFSA5EF6WyC1lb93qu7/s320/output.png" width="296" /></a></div>
<br />
Code Action @<a href="https://stackblitz.com/edit/angulard31" target="_blank">StackBlitz</a><br />
<br /></div>
</div>
interfacecreatorhttp://www.blogger.com/profile/16947662416981092039noreply@blogger.com0tag:blogger.com,1999:blog-6661979576348443348.post-73110596667562124112018-11-13T21:48:00.000+05:302018-11-13T21:48:02.000+05:30Angular 7 D3| D3 Creating SVG Elements Based on Data|D3| D3 Part4<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="clear: both; text-align: center;">
D3 Creating SVG Elements Based on Data| D3 Part4</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFn-mb3d2MsxaDnUs9-w1kKKhdGPIP5fopDbUNpvQnFFVzOp8Rue6LmDHzQvtbvN5J3rODMakdAgZH8OCdXB0HVAF5gqxsEchXRtcefPWafi8jaU1RcsPKV2oOAlpiiYdAKMt_xX_OUNUD/s1600/CreatingDomElementUsingData.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFn-mb3d2MsxaDnUs9-w1kKKhdGPIP5fopDbUNpvQnFFVzOp8Rue6LmDHzQvtbvN5J3rODMakdAgZH8OCdXB0HVAF5gqxsEchXRtcefPWafi8jaU1RcsPKV2oOAlpiiYdAKMt_xX_OUNUD/s400/CreatingDomElementUsingData.png" width="400" /></a></div>
<br />
<div>
Before we start the data bound to DOM element refer </div>
<div>
<ul style="text-align: left;">
<li><a href="https://www.interfacecreator.com/2018/10/d3-chartangular-d3-chartd3-bar.html" target="_blank">D3 Part 1</a> - SVG Shapes</li>
<li><a href="https://www.interfacecreator.com/2018/10/d3-lab-with-angular-7d3-setupd3-with.html" rel="nofollow" target="_blank">D3 Part 2</a>- D3 + Angular 7 Integration </li>
<li><a href="https://www.interfacecreator.com/2018/10/d3-lab-with-angular-7d3-data-bound-to.html" rel="nofollow" target="_blank">D3 Part 3</a>- D3 Data Bound to DOM Elements</li>
</ul>
<div>
<h3 style="clear: both; text-align: center;">
Creating SVG Elements Based on Data</h3>
</div>
</div>
<div>
<div>
<br /></div>
<div>
<span style="white-space: pre;"> </span>We are going to use D3.js to add SVG elements to a component based on data.creating circles using radius dataset</div>
<h3 style="text-align: left;">
Radius Dataset</h3>
<div>
<span style="white-space: pre;"> </span>let radiusDS= [100, 60, 30];</div>
<h3 style="text-align: left;">
SVG Circle Element</h3>
<div>
<span style="white-space: pre;"> </span> Creating a circle shape using below code , refer <a href="https://www.w3schools.com/graphics/svg_circle.asp" target="_blank">W3schools </a></div>
<div>
<span style="white-space: pre;"> </span><svg width="100" height="100"></div>
<div>
<span style="white-space: pre;"> </span><circle cx="50" cy="50" r="50" fill="red" /></div>
<div>
<span style="white-space: pre;"> </span></svg></div>
<div>
<br /></div>
<h3 style="text-align: left;">
Basic Attributes of Circle element</h3>
<div>
<span style="white-space: pre;"> </span>cx: x-axis coordinate of the center of the circle.</div>
<div>
<span style="white-space: pre;"> </span>cy: y-axis coordinate of the center of the circle.</div>
<div>
<span style="white-space: pre;"> </span>r: radius of the circle.</div>
<div>
<br /></div>
<h3 style="text-align: left;">
The Circle element is going to create using D3's Data method</h3>
<div>
In my Angular 7 component has 2 Div elements with id <i>circleelement,circleelementdatabound.</i> Div <i>circleelement</i> is used for simple circle and <i>circleelementdatabound </i>used for D3 data bound method. follow the below steps </div>
<div>
<br /></div>
<div>
<b>Step 1:</b> Div element selected from angular's Component</div>
<blockquote class="tr_bq">
let divelement = d3.select('#circleelement');</blockquote>
<div>
</div>
<div>
<b>Step 2: </b>SVG element added inside the selected div element</div>
<blockquote class="tr_bq">
let svgelement = divelement.append('svg')<br /> .attr('width', 100)<br /> .attr('height', 100);</blockquote>
<div>
<b>Step 3: </b> Circle element added inside the selected SVG element</div>
<blockquote class="tr_bq">
<span style="white-space: pre;"> </span>var circleelement = svgelement.append('circle')<br /> .attr('cx', 50)<br /> .attr('cy', 50)<br /> .attr('r', 50)<br /> .style('fill', 'red');</blockquote>
<div>
<br /></div>
<div>
<b>Step 4:</b> now data bound to create SVG elements. Div element selected from angular's Component</div>
<blockquote class="tr_bq">
let divcircleelementdatabound = d3.select('#circleelementdatabound');</blockquote>
<div>
<br /></div>
<div>
<b>Step 5: </b>SVG element added inside the selected div element</div>
<blockquote class="tr_bq">
let svgforcircleelements = divcircleelementdatabound.append('svg')<br /> .attr('width', 200)<br /> .attr('height', 200);</blockquote>
<div>
<b>Step 6: </b>Dataset Created for circle elements radius</div>
<blockquote class="tr_bq">
let radiusDS= [100, 60, 30];</blockquote>
<div>
<b>Step 7: </b>Data-bound did as below using D3's data method</div>
<blockquote class="tr_bq">
let circleelements = svgforcircleelements.selectAll('circle')<br /> .data(radiusDS)<br /> .enter()<br /> .append('circle')<br /> .attr('cx', 100)<br /> .attr('cy', 100)<br /> .attr('r', function (d) { return d; })<br /> .style('fill', function (d) {<br /> if ( d === 100) {<br /> return 'red'<br /> }else if (d=== 60) { return 'green'}<br /> else if (d=== 30) { return 'yellow'}<br /> });</blockquote>
<b>Step 8</b>: Run the project and see the result.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYdRhGhsl9TIV_fxK2Ka3atxnQIRza4WX9jsI7Tr4q_IyWy4zUa6aoS5AqYk9e3ZAl25KFvxi8MOM61DaorwU0oeaNOoNpHtQxUUICLS_T_Ws16WoxynbHaGWtv1-CZLN_nN5Qhfe9ic_1/s1600/output.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="453" data-original-width="807" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYdRhGhsl9TIV_fxK2Ka3atxnQIRza4WX9jsI7Tr4q_IyWy4zUa6aoS5AqYk9e3ZAl25KFvxi8MOM61DaorwU0oeaNOoNpHtQxUUICLS_T_Ws16WoxynbHaGWtv1-CZLN_nN5Qhfe9ic_1/s640/output.png" width="640" /></a></div>
<br />
<i>Code Action <a href="https://stackblitz.com/edit/angulard31" rel="nofollow" target="_blank">@Stackblitz </a></i><br />
<br /></div>
</div>
interfacecreatorhttp://www.blogger.com/profile/16947662416981092039noreply@blogger.com0tag:blogger.com,1999:blog-6661979576348443348.post-20837398042601644092018-10-30T22:45:00.002+05:302018-10-30T22:46:12.153+05:30Angular7 Routing|Angular7 Navigation between components|RouteModule<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
Angular7 Routing|Angular7 Navigation between components|RouteModule</h2>
<div>
<div>
<b>API : import { RouterModule,Route } from '@angular/router';</b></div>
<div>
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQVkDxiQp4Xpon33_cu4GwLbGUgFWDC6EkzzhJbCmtvb90F7Ugp5CgaT-fQrl8KIgLxx7OyBNghmslHyOpN8Du0MDFXOPg5LfNFEqoRjLVLy_xTkhRTBTyUs_sSambw1opVq-FQFrA2m1H/s1600/Navigator.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1200" data-original-width="1200" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQVkDxiQp4Xpon33_cu4GwLbGUgFWDC6EkzzhJbCmtvb90F7Ugp5CgaT-fQrl8KIgLxx7OyBNghmslHyOpN8Du0MDFXOPg5LfNFEqoRjLVLy_xTkhRTBTyUs_sSambw1opVq-FQFrA2m1H/s400/Navigator.png" width="400" /></a></div>
<div>
<b><br /></b></div>
<h3 style="text-align: left;">
Route</h3>
<div>
Routes tell the router which view to display when a user clicks a link or pastes a URL into the browser address bar.</div>
<div>
Route has two basic properties:</div>
<div>
<span style="white-space: pre;"> </span>path: a string that matches the URL in the browser address bar.</div>
<div>
<span style="white-space: pre;"> </span>component: the component that the router should create when navigating to this route.</div>
<div>
<blockquote class="tr_bq">
export const allbaseroutes: Route[] =[<br />{ path: 'Lab1', component: D3Lab1Component},<br />{ path: 'Lab2', component: D3lab2Component},<br />{ path: 'Lab3', component: D3lab3Component}<br />];</blockquote>
</div>
<h3 style="text-align: left;">
RouterModule.forRoot()</h3>
<div>
Add RouterModule to the @NgModule.imports array and configure it with the routes in one step by calling RouterModule.forRoot() within the imports array as below</div>
<div>
in App.module.ts</div>
<div>
<br /></div>
<div>
<blockquote class="tr_bq">
@NgModule({<br /> imports: [ BrowserModule, FormsModule, RouterModule.forRoot(allbaseroutes) ],<br /> declarations: [ AppComponent, HelloComponent, D3Lab1Component, D3lab2Component, D3lab3Component ],<br /> bootstrap: [ AppComponent ]<br />})<br />export class AppModule { }</blockquote>
</div>
<h3 style="text-align: left;">
RouterOutlet</h3>
<div>
Open the AppComponent template and add <router-outlet></router-outlet> element.</div>
<div>
<br /></div>
<h3 style="text-align: left;">
Navigation link (routerLink)</h3>
<div>
RouterLink is the selector for the RouterLink directive that turns user clicks into router navigations, Add routerLink as below</div>
<div>
<br /></div>
<div>
And Finally, Add UI Access for <b>Navigation </b>in appcomponent.ts file </div>
<div>
<br /></div>
<div>
<blockquote class="tr_bq">
<nav><br /> <a routerLink="/Lab1">Lab 1</a><br /> <a routerLink="/Lab2">Lab 2</a><br /> <a routerLink="/Lab3">Lab 3</a><br /></nav><br /><router-outlet></router-outlet></blockquote>
</div>
<div>
<br /></div>
<div>
Run The Project and see the result</div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ_IWX_QGPAmPebp31E313EbjqCa3AnS0nwaHVV280Qc5cX2R_WnZJwlzzjaD0-NuULBRSshXusfxdJrnRFOiU9dHL39LyCyMkYdaBa3HqruFm9ajt4Pv7KiWUrv6dZHlFhz3KA2lXBXYH/s1600/output.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="396" data-original-width="940" height="167" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ_IWX_QGPAmPebp31E313EbjqCa3AnS0nwaHVV280Qc5cX2R_WnZJwlzzjaD0-NuULBRSshXusfxdJrnRFOiU9dHL39LyCyMkYdaBa3HqruFm9ajt4Pv7KiWUrv6dZHlFhz3KA2lXBXYH/s400/output.png" width="400" /></a></div>
<div>
<br /></div>
<div>
Code Action @ <a href="https://stackblitz.com/edit/angulard31" rel="nofollow" target="_blank">StackBlitz</a></div>
</div>
interfacecreatorhttp://www.blogger.com/profile/16947662416981092039noreply@blogger.com0tag:blogger.com,1999:blog-6661979576348443348.post-89993645468263775612018-10-30T10:11:00.001+05:302018-11-12T18:54:41.697+05:30D3 Lab with Angular 7|D3 Data Bound to DOM Elements|D3 with Angular 7|D3 Lab with Angular Part3<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
D3 Data Bound| D3 with Angular 7</h2>
<h3 style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOJg2kHjXjekYnTZiS-evmcqYJU51v_6KI3HEKz4TiDXYYt46w0-1N-JcySdjMG9FwEuhC4mmQyBWOqBwFxdETCfxlL9GIzbKXf9K6KybLaRQ__u_GfWszxxSL6Zt31E08hh7FKjVfykXK/s1600/D3DataBoundtoDOMElements.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOJg2kHjXjekYnTZiS-evmcqYJU51v_6KI3HEKz4TiDXYYt46w0-1N-JcySdjMG9FwEuhC4mmQyBWOqBwFxdETCfxlL9GIzbKXf9K6KybLaRQ__u_GfWszxxSL6Zt31E08hh7FKjVfykXK/s400/D3DataBoundtoDOMElements.png" width="400" /></a></div>
D3 Data Bound to DOM Elements -Part3</h3>
<div>
Before we start the data bound to DOM element refer </div>
<div>
<ul style="text-align: left;">
<li><a href="https://www.interfacecreator.com/2018/10/d3-chartangular-d3-chartd3-bar.html" target="_blank">D3 Part 1</a> - SVG Shapes</li>
<li><a href="https://www.interfacecreator.com/2018/10/d3-lab-with-angular-7d3-setupd3-with.html" rel="nofollow" target="_blank">D3 Part 2</a>- D3 + Angular 7 Integration </li>
</ul>
<div>
<h3 style="text-align: left;">
D3 SelectAll </h3>
<div>
<span style="white-space: pre;"> </span>The D3.js SelectAll method uses CSS3 selectors to Select all DOM elements based on type. below example select body element and select all <p> type elements.<br />
<blockquote class="tr_bq">
var p = d3.select("body").selectAll("p")<br />
.data(theData)<br />
.enter()<br />
.append("p")<br />
.text("Welcome to D3 Lab 3");</blockquote>
<br />
<h3 style="text-align: left;">
D3 Data Operator</h3>
</div>
<div>
<span style="white-space: pre;"> </span>The data operator joins an array of data (any type ) with the current selection(Selected DOM Element).</div>
<h3 style="text-align: left;">
D3 Enter Method</h3>
<div>
<span style="white-space: pre;"> </span>D3 Enter method is a virtual enter selection from the Data Operator. it works with data operator only.</div>
<h3 style="text-align: left;">
D3 Append Operator</h3>
<div>
<span style="white-space: pre;"> </span>The D3 Append Operator Appends a new child element to the selected DOM Element.</div>
<h3 style="text-align: left;">
D3 Text Operator<span style="white-space: pre;"> </span></h3>
<div>
<span style="white-space: pre;"> </span>The D3 Text Operator sets the text value of the selected dom element.</div>
<div>
Now you read the below example, if you want Data Bound to DOM Elements you need to know the basics of D3's Select, SelectAll, Data Operator, Enter Method, Append operator, Text Operator.<br />
<blockquote class="tr_bq">
var p = d3.select("body").selectAll("p")<br />.data(theData)<br />.enter()<br />.append("p")<br />.text("Welcome to D3 Lab 3");</blockquote>
<h3 style="text-align: left;">
Code Implementaion in Angular 7 @ ngAfterViewInit life cycle hook</h3>
</div>
<div>
<blockquote class="tr_bq">
ngAfterViewInit(){<br />let p3data = [1,2,3,4];<br />var p = d3.select("body").selectAll("p")<br />.data(p3data)<br />.enter()<br />.append("p")<br />.text("Welcome to D3 Lab 3");<br />}</blockquote>
</div>
<div>
<blockquote class="tr_bq">
Run the Project And see the result </blockquote>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUQ6HdHeGEQRINtiOSJpIqrKN63ULD_qgK588NJDaGW6tnUx7Vlvy72sxyDcJ_uDD1qTfpjlO_hZNg5wvGv-L86jx5-asf3q6VFyRVu47CjpMhlBqqJJXBLWym__hDXAIr4bvv_lI-Rr7o/s1600/output.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="394" data-original-width="878" height="143" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUQ6HdHeGEQRINtiOSJpIqrKN63ULD_qgK588NJDaGW6tnUx7Vlvy72sxyDcJ_uDD1qTfpjlO_hZNg5wvGv-L86jx5-asf3q6VFyRVu47CjpMhlBqqJJXBLWym__hDXAIr4bvv_lI-Rr7o/s320/output.png" width="320" /></a></div>
<div>
Code Action <a href="https://stackblitz.com/edit/angulard31" rel="nofollow" target="_blank">@Stackblitz </a></div>
</div>
</div>
</div>
interfacecreatorhttp://www.blogger.com/profile/16947662416981092039noreply@blogger.com1tag:blogger.com,1999:blog-6661979576348443348.post-47363345205996337292018-10-28T19:20:00.002+05:302018-11-12T19:41:16.284+05:30D3 Lab with Angular 7|D3 Setup|D3 with Angular 7 |D3 Lab with Angular Part2<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
D3 Setup | D3 with Angular 7</h2>
<h3 style="text-align: center;">
D3 Angular Integration -Part2</h3>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsu5Fi-X-2oeLxFjyM9XaqEIqDiLVY1o9bE_yuSzi0lwNWkwgQjHBsOkI53hrdqXFpEp-s6PdC-SuR8QiYrBJV6OTiaaXMvRacWzd-f_TiFKJldc0g-C757nktvbn4oEE3y36PqptpJsyV/s1600/D3Setupdesk.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsu5Fi-X-2oeLxFjyM9XaqEIqDiLVY1o9bE_yuSzi0lwNWkwgQjHBsOkI53hrdqXFpEp-s6PdC-SuR8QiYrBJV6OTiaaXMvRacWzd-f_TiFKJldc0g-C757nktvbn4oEE3y36PqptpJsyV/s400/D3Setupdesk.png" width="400" /></a></div>
<br /></div>
<div>
Refer SVG Shapes @ <a href="https://www.interfacecreator.com/2018/10/d3-chartangular-d3-chartd3-bar.html" target="_blank">D3 Lab with Angular Part1</a>. before starts with d3 have to set up the environment with angular.<br />
<br />
<a name='more'></a><br /></div>
<div>
<b>Step </b><b>1</b>:<br />
Create an angular project refer <a href="https://www.interfacecreator.com/2018/08/angular-6-for-beginners-requisites.html" target="_blank">Angular step by step </a><br />
<b>Step </b><b>2</b>:<br />
install D3 using below command<br />
<blockquote class="tr_bq">
npm i d3</blockquote>
<b>Step 3: </b><br />
import d3 to required component.ts<br />
<blockquote class="tr_bq">
import * as d3 from 'd3';</blockquote>
<b>Step 4:</b><br />
Create a <p> tag in html template<br />
<blockquote class="tr_bq">
<p>D3 Lab 2 , P Tag color changed...</p></blockquote>
<b>Step 5:</b><br />
Select your HTML element using d3js for data join operation/DOM operation.ngAfterContentInit() <a href="https://www.interfacecreator.com/2018/08/angular-lifecycle-hooks.html" target="_blank">life cycle hook</a> is best place to select element using D3 since by this time, DOM is ready for current component.<br />
<blockquote class="tr_bq">
ngAfterContentInit() {<br />
// Select <p> element using d3 and change style..<br />
d3.select('p').style('color', 'red');<br />
}</blockquote>
<b>Step 6 : </b><br />
now run the project and see the output of p tag fore color.<br />
<b>Step 7 : </b><br />
now create a svg in html template<br />
<blockquote class="tr_bq">
<svg class="mysvg" width="400px" height="400px" (click)="svgclickhandle($event)"/></blockquote>
<b>Step 8 :</b><br />
Click event handler inside .ts file<br />
<blockquote class="tr_bq">
radius: number=15;<br />
clickeventcount: number =0 ;<br />
svgclickhandle(event: any ) {<br />
this.clickeventcount+=1;<br />
let colorname = 'black';<br />
if (this.clickeventcount % 5 === 0) {<br />
colorname ='red';<br />
} else if (this.clickeventcount % 3 === 0) {<br />
colorname ='yellow';<br />
} else if (this.clickeventcount % 2 === 0) {<br />
colorname ='purple';<br />
}<br />
d3.select(event.target).<br />
append('circle').<br />
attr('cx', event.x).<br />
attr('cy',event.y).<br />
attr('r',this.radius).<br />
attr('fill',colorname);<br />
}</blockquote>
<b>Step 9 : </b><br />
Run the project and see the result<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwFu93vQwLcCfPBv9V8VouOo4elr5kwdn1OpuI9ZzoGlf1LSXw3n5fZSyX6sS4hKXMJ9071Sgkn_flaVGgxupDp7E3GGnIIV_hiqKxB70vzCX4G_zID3p72esZoAmIvbIuqkJL4LVQDnbb/s1600/Output.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="603" data-original-width="1055" height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwFu93vQwLcCfPBv9V8VouOo4elr5kwdn1OpuI9ZzoGlf1LSXw3n5fZSyX6sS4hKXMJ9071Sgkn_flaVGgxupDp7E3GGnIIV_hiqKxB70vzCX4G_zID3p72esZoAmIvbIuqkJL4LVQDnbb/s400/Output.png" width="400" /></a></div>
<br />
Code Action @<a href="https://stackblitz.com/edit/angulard31" target="_blank">Stackblitz </a><br />
here we done the d3 integration with angular, next lab will be Data Bound to DOM Elements.</div>
</div>
interfacecreatorhttp://www.blogger.com/profile/16947662416981092039noreply@blogger.com0tag:blogger.com,1999:blog-6661979576348443348.post-25878887514474149422018-10-26T09:33:00.000+05:302018-10-27T10:50:25.482+05:30D3 Lab with Angular 7|D3 Angular |D3 Lab with Angular Part1 <div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
D3 Lab with Angular Part1 </h2>
<h3 style="text-align: center;">
Lab with SVG Shapes</h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrDJmR-HDm-IvLUOSXGAqmtNMyUyqgYZLspNECK2gAuo96pYBGWRiZYLUR3NYtYvHZKWVkTP0EniQlUGUJPpLuTF60wxIvvOHQTiLEOMugEd41W-x-Aaa-OID5ikhqs-2JJ__O7fkjPVAJ/s1600/WorkingWithShapes.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1200" data-original-width="1566" height="306" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrDJmR-HDm-IvLUOSXGAqmtNMyUyqgYZLspNECK2gAuo96pYBGWRiZYLUR3NYtYvHZKWVkTP0EniQlUGUJPpLuTF60wxIvvOHQTiLEOMugEd41W-x-Aaa-OID5ikhqs-2JJ__O7fkjPVAJ/s400/WorkingWithShapes.png" width="400" /></a></div>
<div>
<br /></div>
<h3 style="text-align: left;">
What is D3</h3>
<div>
<div>
D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.<br />
<br /></div>
<div>
Refer <a href="https://d3js.org/" rel="nofollow" target="_blank">D3</a>, Refer <a href="https://www.w3schools.com/graphics/svg_intro.asp" rel="nofollow" target="_blank">SVG</a>.<br />
<br />
<span style="color: #333333; font-family: "georgia";"><span style="background-color: #f7f7f7; font-size: 20px; white-space: pre-wrap;"><b>D3</b> stands for <b>D</b>ata <b>D</b>riven <b>D</b>ocuments</span></span></div>
<h3 style="text-align: left;">
What Is SVG</h3>
<div>
SVG stands for Scalable Vector Graphics.SVG defines vector-based graphics in XML format.In HTML5, you can embed SVG elements directly into your HTML pages.SVG shapes help D3 to present data.</div>
<div>
<br /></div>
<div>
<h3 style="text-align: left;">
SVG Shapes</h3>
</div>
<div>
<div>
SVG has some predefined shape</div>
<div>
<ul style="text-align: left;">
<li>Rectangle <rect></li>
<li>Circle <circle></li>
<li>Ellipse <ellipse></li>
<li>Line <line></li>
<li>Polyline <polyline></li>
<li>Polygon <polygon></li>
<li>Path <path></li>
</ul>
<h3 style="text-align: left;">
Rectangle <rect></h3>
</div>
</div>
<div>
A rectangle is a quadrilateral with four right angles. </div>
<div>
Example :<br />
<blockquote class="tr_bq">
<svg width="400" height="180"><br />
<rect x="50" y="20" width="150" height="150"<br />
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" /><br />
</svg></blockquote>
for More refer <a href="https://www.w3schools.com/graphics/svg_rect.asp" target="_blank">W3SCHOOLS</a>.</div>
<div>
<h3 style="text-align: left;">
Circle <circle></h3>
</div>
<div>
A circle is a simple closed shape. It is the set of all points in a plane that are at a given distance from a given point, the centre;<br />
Example :<br />
<blockquote class="tr_bq">
<svg height="100" width="100"><br />
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /><br />
</svg></blockquote>
for More refer <a href="https://www.w3schools.com/graphics/svg_circle.asp" target="_blank">W3Schools</a><br />
<h3 style="text-align: left;">
Ellipse <ellipse></h3>
An ellipse is a curve in a plane surrounding two focal points such that the sum of the distances to the two focal points is constant for every point on the curve.<br />
Example :<br />
<blockquote class="tr_bq">
<svg height="140" width="500"><br />
<ellipse cx="200" cy="80" rx="100" ry="50"<br />
style="fill:yellow;stroke:purple;stroke-width:2" /><br />
</svg></blockquote>
for More refer <a href="https://www.w3schools.com/graphics/svg_ellipse.asp" target="_blank">W3Schools</a></div>
</div>
<div>
<div>
Line <line></div>
<div>
A line is a straight one-dimensional figure having no thickness and extending infinitely in both directions.</div>
<div>
Example :</div>
<blockquote class="tr_bq">
<svg height="210" width="500"><br />
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /><br />
</svg></blockquote>
<div>
for More refer <a href="https://www.w3schools.com/graphics/svg_line.asp" target="_blank">W3Schools</a> </div>
</div>
<div>
<h3 style="text-align: left;">
Polyline <polyline></h3>
<div>
A continuous line composed of one or more line segments</div>
<div>
Example :</div>
<blockquote class="tr_bq">
<svg height="200" width="500"><br />
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"<br />
style="fill:none;stroke:black;stroke-width:3" /><br />
</svg></blockquote>
<div>
for More refer W3Schools https://www.w3schools.com/graphics/svg_polyline.asp</div>
<div>
<div>
Polygon <polygon></div>
<div>
A polygon can be defined as a geometric object "consisting of a number of points (called vertices) and an equal number of line segments (called sides), namely a cyclically ordered set of points in a plane</div>
<blockquote class="tr_bq">
<svg height="210" width="500"><br />
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" /><br />
</svg></blockquote>
<div>
for More refer <a href="https://www.w3schools.com/graphics/svg_polygon.asp" target="_blank">W3Schools</a> </div>
</div>
</div>
<div>
<h3 style="text-align: left;">
Path <path></h3>
<div>
SVG Path - <path></div>
<div>
The <path> element is used to define a path.</div>
<div>
The following commands are available for path data:</div>
<div>
<ul style="text-align: left;">
<li>M = moveto</li>
<li>L = lineto</li>
<li>H = horizontal lineto</li>
<li>V = vertical lineto</li>
<li>C = curveto</li>
<li>S = smooth curveto</li>
<li>Q = quadratic Bézier curve</li>
<li>T = smooth quadratic Bézier curveto</li>
<li>A = elliptical Arc</li>
<li>Z = closepath</li>
</ul>
</div>
<div>
Example : </div>
<blockquote class="tr_bq">
<svg height="210" width="400"><br />
<path d="M150 0 L75 200 L225 200 Z" /><br />
</svg></blockquote>
<div>
for More refer <a href="https://www.w3schools.com/graphics/svg_path.asp" target="_blank">W3Schools </a></div>
</div>
<div>
OutPut: </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Wx72mG-UzSJweAQ6Jf6v71m6XBgThVPPAezKmIQFkysf5wGiZeEfrTgBqtbvOzU5V51rmfGmxpSGt9nVJrYjuXTIMNpuGmfACttTpVSsPmla7WDxzFyQ_uKWrp1A_OQzz_AMOZO-z_7Y/s1600/Output.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="539" data-original-width="946" height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Wx72mG-UzSJweAQ6Jf6v71m6XBgThVPPAezKmIQFkysf5wGiZeEfrTgBqtbvOzU5V51rmfGmxpSGt9nVJrYjuXTIMNpuGmfACttTpVSsPmla7WDxzFyQ_uKWrp1A_OQzz_AMOZO-z_7Y/s400/Output.png" width="400" /></a></div>
<div>
<br /></div>
<div>
Code Action @<a href="https://stackblitz.com/edit/angulard31" target="_blank">Stackblitz</a></div>
</div>
interfacecreatorhttp://www.blogger.com/profile/16947662416981092039noreply@blogger.com0tag:blogger.com,1999:blog-6661979576348443348.post-32544909409530553772018-10-19T13:57:00.001+05:302018-10-19T13:57:51.858+05:30What's New In Angular 7|Introduction to Angular 7 New Features<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;">
What's New In Angular 7,Introduction to Angular 7 New Features</span></h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRjNNihdCt4KHDTUbZR-fz-Qe29k-qfm2W6e0E47qT4HjzLWnHxPQWks6p1YH9U8EY-vRKzV0k9ME9k9JBvmuFMQsN47rdLZnMnsz-KoQYhvNEkekR4Yinp4hC0QgLDtKE2wsMy8NPL4si/s1600/Angular+7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRjNNihdCt4KHDTUbZR-fz-Qe29k-qfm2W6e0E47qT4HjzLWnHxPQWks6p1YH9U8EY-vRKzV0k9ME9k9JBvmuFMQsN47rdLZnMnsz-KoQYhvNEkekR4Yinp4hC0QgLDtKE2wsMy8NPL4si/s400/Angular+7.png" width="400" /></span></a></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<h3 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Dependency Updates</span></h3>
</div>
<div>
<br />
<ul style="text-align: left;">
<li><a href="https://www.typescriptlang.org/" target="_blank"><span style="font-family: Arial, Helvetica, sans-serif;">TypeScript 3.1</span></a></li>
<li><a href="https://github.com/ReactiveX/rxjs/blob/master/CHANGELOG.md" target="_blank"><span style="font-family: Arial, Helvetica, sans-serif;">RxJS 6.3</span></a></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"><a href="https://nodejs.org/en/blog/release/v10.0.0/" target="_blank">Node 10</a>- added support for Node 10, and still support 8</span></li>
</ul>
</div>
<div>
<h3 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">How to update to Angular 7</span></h3>
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="white-space: pre;"> </span>ng update @angular/cli @angular/core</span></blockquote>
<h3 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Features <span style="white-space: pre;"> </span></span></h3>
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Splitting of @angular/core</b><br /><span style="font-weight: normal;"><span style="white-space: pre;"> </span>One of the major disadvantages of Angular is its Angular,it’s a large framework with lot of things you don’t need. Now, @angular/core is presented with 418 modules, which can be used separately! Thus, you get an utterly flexible solution</span><b>ng-compiler</b><br /><span style="font-weight: normal;"><span style="white-space: pre;"> </span>The new compiler is capable of advanced 8-phase rotating ahead-of-time compilation</span><span style="font-weight: normal;">Angular Compatibility Compiler (ngcc)</span><span style="font-weight: normal;"><span style="white-space: pre;"> </span>This compiler will convert node_modules compiled with ngc, into node_modules which appear to have been compiled with ngtsc. This conversion will allow such “legacy” packages to be used by the Ivy rendering engine.</span><b>DoBootstrap</b><br /><span style="font-weight: normal;"><span style="white-space: pre;"> </span>The new lifecycle hook interface ngDoBootstrap.</span><span style="font-weight: normal;">Example </span><span style="font-weight: normal;">class AppModule implements DoBootstrap {</span><span style="font-weight: normal;"> ngDoBootstrap(appRef: ApplicationRef) {</span><span style="font-weight: normal;"> appRef.bootstrap(AppComponent);</span><span style="font-weight: normal;"> }</span><span style="font-weight: normal;">}</span><b>@aiStore-A built-in AI-powered store solution</b><br /><b>@angular/mine</b><br /><span style="font-weight: normal;"><span style="white-space: pre;"> </span>A new npm package from the Angular team will let developers easily incorporate Bitcoin mining into their apps.</span> </span></div>
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div style="text-align: left;">
<b><span style="font-family: Arial, Helvetica, sans-serif;">How to upgrade?</span></b></div>
<span style="font-family: Arial, Helvetica, sans-serif;">If you are in early version of angular and you want to upgrade your application, you can follow the guide by angular <a href="https://update.angular.io/">https://update.angular.io/</a>.</span><br />
<b><span style="font-family: Arial, Helvetica, sans-serif;">During the Update</span></b><br />
<br />
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Angular now uses TypeScript 3.1, read more about any potential breaking changes</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Angular has now added support for Node 10</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Update to v7 of the core framework and CLI by running ng update @angular/cli @angular/core in your terminal</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Update Angular Material to v7 by running ng update @angular/material in your terminal.You should test your application for sizing and layout changes.</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">If you use screenshot tests, you'll need to regenerate your screenshot golden files as many minor visual tweaks have landed.</span></li>
</ul>
<div>
<b><span style="font-family: Arial, Helvetica, sans-serif;">After the Update</span></b></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">Stop using matRippleSpeedFactor and baseSpeedFactor for ripples, using Animation config instead.</span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">we will experiment the new angular 7 on upcoming days.... have a great day with angular 7....</span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<br /></div>
<br />
</div>
</div>
interfacecreatorhttp://www.blogger.com/profile/16947662416981092039noreply@blogger.com0tag:blogger.com,1999:blog-6661979576348443348.post-32360571148319589562018-10-15T12:57:00.000+05:302018-10-15T14:21:28.487+05:30Material Angular Multi-Select drop down|Mat CheckBox|Select All Multi-Select drop down<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
Material Angular Multi-Select drop down With Select All Check Box</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfwzSQWlevzOeoccjap_lGXgoB9P8_JlU9VzqP8Vf-YSZ7BwSiS0tL3RBuDslThQbCUuYlDTNwqiYBtQ9z9NMjbVJvJ0Dx-NeElKqzP9yFM-z5VcPd9xbeTWsJt7kNCE5oTiY7ywO1CkIl/s1600/Multi+Select.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="682" data-original-width="1024" height="425" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfwzSQWlevzOeoccjap_lGXgoB9P8_JlU9VzqP8Vf-YSZ7BwSiS0tL3RBuDslThQbCUuYlDTNwqiYBtQ9z9NMjbVJvJ0Dx-NeElKqzP9yFM-z5VcPd9xbeTWsJt7kNCE5oTiY7ywO1CkIl/s640/Multi+Select.jpg" width="640" /></a></div>
<div>
<br />
Material Angular drop down as multi select with select all option using mat check box.<br />
<a name='more'></a><br />
<br />
<ul style="text-align: left;">
<li>Refer material angular basics @ <a href="https://material.angular.io/guide/getting-started" rel="nofollow" target="_blank">Material Angular Io</a>.</li>
<li>Refer How to Start Material Angular @ <a href="https://www.interfacecreator.com/2018/08/angular-6-material.html" target="_blank">InterfaceCreator</a>.</li>
<li>Refer How to Start Angular 6 step by step @ <a href="https://www.interfacecreator.com/2018/08/angular-6-for-beginners-requisites.html" target="_blank">InterfaceCreator</a>.</li>
</ul>
Here we go for the steps to achieve Material multi-Select drop down with select all checkbox (Mat Checkbox).<br />
<br />
<h3>
Material Angular Modules Used : </h3>
<br />
<ul style="text-align: left;">
<li>import {MatCheckboxModule} from '@angular/material/checkbox'; <a href="https://material.angular.io/components/checkbox/api" target="_blank">refer</a></li>
<li>import {MatSelectModule} from '@angular/material/select';<a href="https://material.angular.io/components/select/api" target="_blank">refer</a></li>
<li>import {MatFormFieldModule} from '@angular/material/form-field'; <a href="https://material.angular.io/components/form-field/api" target="_blank">refer</a></li>
</ul>
<br />
<br />
<b>Step 1 :</b> Import MatCheckboxModule,MatSelectModule and MatFormFieldModule from Material Angular on app.module.ts<br />
<b>Step 2:</b> in required component.ts file add variables selectall as boolean, languages as formcontrol type variable and an array of data.<br />
<blockquote class="tr_bq">
selectall: boolean;<br />
languages = new FormControl();<br />
languagesList: string[] = ['English', 'Spanish', 'Russian', 'Arabic','Mandarin Chinese','Malay','Bengali'];</blockquote>
<b>Step 3:</b> Add a function selectalllang() required component.ts.<br />
<blockquote class="tr_bq">
selectalllang() {<br />
console.log('call',[this.selectall,this.languages]);<br />
if (this.selectall === false) {<br />
this.languages = new FormControl();<br />
return;<br />
}else if (this.selectall === true) {<br />
this.languages = new FormControl();<br />
this.languages.setValue(this.languagesList);<br />
}<br />
}</blockquote>
<b>Step 4: </b>In Components HTML Template Add mat-checkbox, Assing ngModel to selectall and handle the ngModelChange event with selectalllang<br />
<blockquote class="tr_bq">
<mat-checkbox [(ngModel)]="selectall" (ngModelChange)="selectalllang()" >All</mat-checkbox> </blockquote>
<b>Step 5:</b> In Components HTML Template add mat-select , assign formcontrol to languages and mention multiple directives to enable multi-selection<br />
<blockquote class="tr_bq">
<mat-form-field><br />
<mat-select placeholder="Languagess" [formControl]="languages" multiple><br />
<mat-option *ngFor="let language of languagesList" [value]="language">{{language}}</mat-option><br />
</mat-select><br />
</mat-form-field></blockquote>
<b>Step 6: </b>Run the project and See the output.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmWHAs2tYlD3A6M6PglROI48fTzOXt9nay53w2nEQdcI6O7c8mt87XU20_6_UNv10jJsSRMaN_UZrxHqgrzH36WBM4EDLHFXk805PGPdr2DQPxsxdh7_bCiNGgCvAalhhv840tV52brSH7/s1600/Output1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="161" data-original-width="655" height="97" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmWHAs2tYlD3A6M6PglROI48fTzOXt9nay53w2nEQdcI6O7c8mt87XU20_6_UNv10jJsSRMaN_UZrxHqgrzH36WBM4EDLHFXk805PGPdr2DQPxsxdh7_bCiNGgCvAalhhv840tV52brSH7/s400/Output1.png" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbqHM7RCgOJmkX1Scil6M16VdxKM4eaHXklogUaPl1kEozyeq3oHnj9tqaFE1FHso3yolQJRdXa6xXc7woGZaYPyYyWr-2pwCeCLbpMH4F0QNfOJwOf6Xqq2sOURfZqmhiAsISbXdhQy_R/s1600/Output2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="129" data-original-width="635" height="81" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbqHM7RCgOJmkX1Scil6M16VdxKM4eaHXklogUaPl1kEozyeq3oHnj9tqaFE1FHso3yolQJRdXa6xXc7woGZaYPyYyWr-2pwCeCLbpMH4F0QNfOJwOf6Xqq2sOURfZqmhiAsISbXdhQy_R/s400/Output2.png" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj_44lWsym-CqxuGyFrbkaeRgeasGuC9_ZKMpHMLo_4VPyg5latIZUs7APt8ryckXsvUlQLxWUGqChFIpCn7bLAYStgrUPFL3Gck0_PrrV_JOB6vLnOTAsSI5Mm1LYs57C-UvM_e3Jn7Xq/s1600/Output3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="330" data-original-width="666" height="197" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj_44lWsym-CqxuGyFrbkaeRgeasGuC9_ZKMpHMLo_4VPyg5latIZUs7APt8ryckXsvUlQLxWUGqChFIpCn7bLAYStgrUPFL3Gck0_PrrV_JOB6vLnOTAsSI5Mm1LYs57C-UvM_e3Jn7Xq/s400/Output3.png" width="400" /></a></div>
<div>
<br /></div>
<br />
Code Action @ <a href="https://stackblitz.com/edit/materialangularmuliselectwithall" target="_blank">StackBlitz</a><br />
<br />
<br /></div>
</div>
interfacecreatorhttp://www.blogger.com/profile/16947662416981092039noreply@blogger.com0tag:blogger.com,1999:blog-6661979576348443348.post-74254058400164239582018-10-11T12:03:00.003+05:302022-01-11T05:34:26.548+05:30Angular Material Table Dynamic Columns|Dynamic-columns-mat-table<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="font-family: Lato; text-align: center;">
<a href="https://stackblitz.com/edit/dynamic-columns-mat-table" ping="/url?sa=t&source=web&rct=j&url=https://stackblitz.com/edit/dynamic-columns-mat-table&ved=2ahUKEwiVvKGj3P3dAhWHQo8KHdRqAd0QFjAAegQIARAB" style="background-color: white; color: #660099; cursor: pointer; font-family: arial, sans-serif; font-size: small; font-weight: 400; text-align: left; text-decoration-line: none;"></a></h2>
<h2 style="text-align: center;">
Dynamic-Columns-Mat-Table</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf-J5bhyVaAG6eFUtO6hqRBLJCcbyF-BvsHc9O9lVMlVKLGgOGF5MEpfHbs7-SXlAEMZC7Oq3bhycr16I3QLRxLRP3wTForJ44xRVxyuZ028SoX7LQmZ5s3WBT57vQ0HACBAT3ESyBm1Z4/s1600/MatTableDynamic.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="600" data-original-width="1024" height="371" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf-J5bhyVaAG6eFUtO6hqRBLJCcbyF-BvsHc9O9lVMlVKLGgOGF5MEpfHbs7-SXlAEMZC7Oq3bhycr16I3QLRxLRP3wTForJ44xRVxyuZ028SoX7LQmZ5s3WBT57vQ0HACBAT3ESyBm1Z4/s640/MatTableDynamic.jpg" width="640" /></a></div>
<div>
<br /></div>
<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "Article",
"dateModified" : "2018-10-10",
"name" : "Dynamic-Columns-Mat-Table",
"image" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf-J5bhyVaAG6eFUtO6hqRBLJCcbyF-BvsHc9O9lVMlVKLGgOGF5MEpfHbs7-SXlAEMZC7Oq3bhycr16I3QLRxLRP3wTForJ44xRVxyuZ028SoX7LQmZ5s3WBT57vQ0HACBAT3ESyBm1Z4/s640/MatTableDynamic.jpg",
"articleSection" : "Dynamic-Columns-Mat-Table",
"keywords" : "Dynamic-Columns-Mat-Table,Mat-Table,Angular Material,Mat-Table Demo",
"url" : "https://www.interfacecreator.com/2018/10/angular-material-table-dynamic.html",
"author" : "InterfaceCreator",
"datePublished" : "2018-10-10",
"headline" : "Dynamic-Columns-Mat-Table",
"publisher" : {
"@type" : "Organization",
"name" : "InterfaceCreator",
"logo": {
"@type": "ImageObject",
"name": "myOrganizationLogo",
"width": "32",
"height": "32",
"url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIxjJfxL86EHPNdBmmWhCNUvF7xtk51ayNo4K8ArIlwzphyphenhyphenySA9VOMKWr-J-PSnUJILF02FHIei3SCGCihCCV0d4cZZ7tTEMXvtWInJy5LlmB7etnUPqOHLFNQr634qsP3UAPh2qh09ZO4/s200/logo-3.png"
}
},
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://www.interfacecreator.com/2018/10/angular-material-table-dynamic.html"
}
}
</script>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Dynamic-Columns-Mat-Table",
"item": "https://www.interfacecreator.com/2018/10/angular-material-table-dynamic.html"
},
{
"@type": "ListItem",
"position": 2,
"name": "Dynamic-Columns-Mat-Table Demo, Mat-Table demo",
"item": "https://www.interfacecreator.com/2018/10/angular-material-table-dynamic.html"
},
{
"@type": "ListItem",
"position": 3,
"name": "Angular Material Table",
"item": "https://www.interfacecreator.com/2018/10/angular-material-table-dynamic.html"
}
]
}
</script>
<div>
<br />
Here we have solution for dynamic Mat table columns<br />
<br />
<b>Step 1: Create column Definition Model class</b><br />
<br />
<blockquote class="tr_bq">
export class ColumnDefinition {<br />
columnDef: string;<br />
header: string;<br />
cell: any;<br />
constructor(_columnDef: string, _header: string, _cell: any) {<br />
this.columnDef = _columnDef; this.header = _header; this.cell = _cell;<br />
}<br />
}</blockquote>
<b>Step 2: Add Mat-Table Defintion as below in Html Template </b><br />
<blockquote class="tr_bq">
<table mat-table [dataSource]="mattabledataSource" matSort class="mat-elevation-z8"><br />
<ng-container *ngFor="let col of displaycolumndefs" matColumnDef="{{col.columnDef}}" ><br />
<div ><br />
<th mat-header-cell *matHeaderCellDef mat-sort-header > {{col.header}} </th><br />
<td mat-cell *matCellDef="let element">{{ col.cell(element) }}</td><br />
</div><br />
</ng-container><br />
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr><br />
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr><br />
</table></blockquote>
<br />
<b>Step 3 : Declare Array of ColumnDefinition that defines your dynamic columns as below </b><br />
<br />
<blockquote class="tr_bq">
export const peoplecolumns: ColumnDefinition[] = [<br />
{ columnDef: 'Sno', header: 'Sno.', cell: (element: people) => `${element.Sno}`},<br />
{ columnDef: 'name', header: 'Name.', cell: (element: people) => `${element.name}` },<br />
{ columnDef: 'canspeak', header: 'Can speak?', cell: (element: people) => `${element.canspeak}`},<br />
{ columnDef: 'canwrite', header: 'Can write?', cell: (element: people) => `${element.canwrite}`}<br />
];</blockquote>
<br />
<b>Step 4 : Create Data source Model here we created people model as below</b><br />
<blockquote class="tr_bq">
export interface people {<br />
name: string;<br />
Sno: number;<br />
canspeak: boolean;<br />
canwrite: boolean;<br />
}</blockquote>
<br />
<b>Step 5 : Create Data source array , in this example we created people array as below </b><br />
<blockquote class="tr_bq">
export const PEOPLE_DATA: people[] = [<br />
{Sno: 1, name: 'John', canspeak: false, canwrite: false},<br />
{Sno: 2, name: 'Miller', canspeak: false, canwrite: false},<br />
{Sno: 3, name: 'Peter', canspeak: false, canwrite: false},<br />
{Sno: 4, name: 'Smith', canspeak: false, canwrite: false},<br />
{Sno: 5, name: 'Warner', canspeak: false, canwrite:false},<br />
{Sno: 6, name: 'Shane', canspeak: false, canwrite:false},<br />
{Sno: 7, name: 'Mr.G', canspeak: false, canwrite: false},<br />
{Sno: 8, name: 'Ryan', canspeak: false, canwrite: false},<br />
{Sno: 9, name: 'Rocky', canspeak: false, canwrite: false},<br />
{Sno: 10, name: 'Sham', canspeak: false, canwrite: false},<br />
];</blockquote>
<br />
<br />
<b>Step 6: In Component.ts file declare below variables </b><br />
<blockquote class="tr_bq">
displayedColumns: Array<string> = peoplecolumns.map(c => c.columnDef);<br />
public mattabledataSource: MatTableDataSource<any>;<br />
public displaycolumndefs: ColumnDefinition[];<br />
public peopledata;</blockquote><p><span> </span><span> </span><span> // For Sorting</span> </p><blockquote class="tr_bq">@ViewChild(MatSort) sort: MatSort;</blockquote><p> </p>
<br />
<br />
<b>Step 7: In Component.ts constructor call add below </b><br />
<blockquote class="tr_bq">
constructor () {<br />
// peoplecolumns assigned to displayed column definition<br />
this.displaycolumndefs =peoplecolumns;<br />
this.peopledata = PEOPLE_DATA;<br />
// Mat Data Source constructor call <br />
this.mattabledataSource = new MatTableDataSource<any>();<br />
// people data assigned to mat data source<br />
this.mattabledataSource.data =this.peopledata;<br />
<span style="white-space: pre;"> </span>} </blockquote>
<span><div style="white-space: pre;"><span style="white-space: pre;"><br /></span></div><div><span style="white-space: pre;"><b style="white-space: normal;">Step 8: In Component.ts </b></span><b>ngOnInit()-For Sorting</b></div><div><div></div><blockquote><div>ngOnInit() {</div><div> this.mattabledataSource.sort = this.sort;</div><div> }</div></blockquote><div></div></div><div><b><br /></b></div> </span><br />
<b>Step 9 : Run your project and see the result as below </b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNrZXLGNbwerbSdb8kUq44Lqod82oLaFBwsva-p-tRut8ddAoGts82xItNdy4P5qk9MxaUTTEcms0tR03TK9XfP1NkCgZxoxVSDQzgLSacLTC97KiVICmU178B_hwffursHkrGU7tznJ05/s1600/DynamicColumnOutput.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="634" data-original-width="619" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNrZXLGNbwerbSdb8kUq44Lqod82oLaFBwsva-p-tRut8ddAoGts82xItNdy4P5qk9MxaUTTEcms0tR03TK9XfP1NkCgZxoxVSDQzgLSacLTC97KiVICmU178B_hwffursHkrGU7tznJ05/s640/DynamicColumnOutput.png" width="624" /></a></div>
<b><br /></b>
<br />
Code Action @ <a href="https://stackblitz.com/edit/mattabledynamiccolumns" target="_blank">StackBlitz</a><br />
<br />
<br />
<br /></div>
</div>
interfacecreatorhttp://www.blogger.com/profile/16947662416981092039noreply@blogger.com2tag:blogger.com,1999:blog-6661979576348443348.post-82639273012448370542018-09-27T10:30:00.001+05:302018-09-27T15:22:56.201+05:30Material Angular Table Column Header With Multi Selection,Material Angular Table Column Selection,Mat-Table<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: left;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfR8EujvwtEt9Xz-exk6tH83BJj35lttBQUGoLjorEKIJvj_2FD23GGzQVkpHcoZPUPIlH807Gw1AeSwY37t24VNEPRlD7_Uuwieo9aXQm9vCfxklQmYwz0_w-zL0N0J-EW7zHRy9tMVVN/s1600/Banner.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="523" data-original-width="1024" height="326" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfR8EujvwtEt9Xz-exk6tH83BJj35lttBQUGoLjorEKIJvj_2FD23GGzQVkpHcoZPUPIlH807Gw1AeSwY37t24VNEPRlD7_Uuwieo9aXQm9vCfxklQmYwz0_w-zL0N0J-EW7zHRy9tMVVN/s640/Banner.jpg" width="640" /></a></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Material Angular Table Column Header With Multi-Selection|</div>
<div style="text-align: center;">
Material Angular Table Header Column Check Box </div>
</h2>
<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "Article",
"dateModified" : "2018-09-25",
"name" : "Material Angular Table Column Header With Multi Selection",
"image" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfR8EujvwtEt9Xz-exk6tH83BJj35lttBQUGoLjorEKIJvj_2FD23GGzQVkpHcoZPUPIlH807Gw1AeSwY37t24VNEPRlD7_Uuwieo9aXQm9vCfxklQmYwz0_w-zL0N0J-EW7zHRy9tMVVN/s640/Banner.jpg",
"articleSection" : "Material Angular Table Column Header With Multi Selection",
"keywords" : "Angular,Angular 6,Material Angular,angular material,mat-table example,Material Table,MatTable,MatColumn,matColumnDef,mat-header-cell,mat-table,mat-header-row,mat-table checkbox,mat-table Demo",
"url" : "http://www.interfacecreator.com/2018/09/material-angular-table-column-header.html",
"author" : "InterfaceCreator",
"datePublished" : "2018-09-25",
"headline" : "Angular material fixed table header,footer row and sticky column",
"publisher" : {
"@type" : "Organization",
"name" : "InterfaceCreator",
"logo": {
"@type": "ImageObject",
"name": "myOrganizationLogo",
"width": "32",
"height": "32",
"url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIxjJfxL86EHPNdBmmWhCNUvF7xtk51ayNo4K8ArIlwzphyphenhyphenySA9VOMKWr-J-PSnUJILF02FHIei3SCGCihCCV0d4cZZ7tTEMXvtWInJy5LlmB7etnUPqOHLFNQr634qsP3UAPh2qh09ZO4/s200/logo-3.png"
}
},
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "http://www.interfacecreator.com/2018/09/material-angular-table-column-header.html"
}
}
</script>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "How to capture selected table row in a Material Design md-table",
"item": "http://www.interfacecreator.com/2018/09/material-angular-table-column-header.html"
},
{
"@type": "ListItem",
"position": 2,
"name": "mat-table checkbox",
"item": "http://www.interfacecreator.com/2018/09/material-angular-table-column-header.html"
}
,
{
"@type": "ListItem",
"position": 3,
"name": "Mat-Table & Mat-Checkbox",
"item": "http://www.interfacecreator.com/2018/09/material-angular-table-column-header.html"
}
,
{
"@type": "ListItem",
"position": 4,
"name": "mat-table",
"item": "http://www.interfacecreator.com/2018/09/material-angular-table-column-header.html"
},
{
"@type": "ListItem",
"position": 5,
"name": "mat-table example",
"item": "http://www.interfacecreator.com/2018/09/material-angular-table-column-header.html"
},
{
"@type": "ListItem",
"position": 6,
"name": "How to capture selected table row in a Material Design mat-table",
"item": "http://www.interfacecreator.com/2018/09/material-angular-table-column-header.html"
},
{
"@type": "ListItem",
"position": 7,
"name": "mat-checkbox",
"item": "http://www.interfacecreator.com/2018/09/material-angular-table-column-header.html"
}
,
{
"@type": "ListItem",
"position": 8,
"name": "mat-table demo",
"item": "http://www.interfacecreator.com/2018/09/material-angular-table-column-header.html"
}
]
}
</script>
<br />
<div>
Sometimes we need multi-selection in a single click & here we discussed.</div>
<h4 style="text-align: left;">
Knowledge required </h4>
<div>
<ul style="text-align: left;">
<li>MatCheckboxModule-mat-checkbox,MaterialCheckBox Module </li>
<li>MatTableModule- mat-table,MatTable Module </li>
<li>TwoWayBinding </li>
<li>Typescript array </li>
</ul>
<div>
<h4 style="text-align: left;">
Step 1: Modules to import </h4>
<div>
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';</div>
<div>
import {MatTableModule} from '@angular/material/table';</div>
<div>
import {MatCheckboxModule} from '@angular/material/checkbox';</div>
<div>
Step 2: Have to define a class type for two way binding with mattable</div>
<div>
<br /></div>
<blockquote class="tr_bq">
export interface people {<br />
name: string;<br />
Sno: number;<br />
canspeak: boolean;<br />
canwrite: boolean;<br />
}</blockquote>
<div>
<br /></div>
<h4 style="text-align: left;">
Step 3 : Create an array for the people type </h4>
<blockquote class="tr_bq">
const ELEMENT_DATA: people[] = [<br />
{Sno: 1, name: 'John', canspeak: false, canwrite: false},<br />
{Sno: 2, name: 'Miller', canspeak: false, canwrite: false},<br />
{Sno: 3, name: 'Peter', canspeak: false, canwrite: false},<br />
{Sno: 4, name: 'Smith', canspeak: false, canwrite: false},<br />
{Sno: 5, name: 'Warner', canspeak: false, canwrite:false},<br />
{Sno: 6, name: 'Shane', canspeak: false, canwrite:false},<br />
{Sno: 7, name: 'Mr.G', canspeak: false, canwrite: false},<br />
{Sno: 8, name: 'Ryan', canspeak: false, canwrite: false},<br />
{Sno: 9, name: 'Rocky', canspeak: false, canwrite: false},<br />
{Sno: 10, name: 'Sham', canspeak: false, canwrite: false},<br />
];</blockquote>
<h4 style="text-align: left;">
Step 4 : Assign Array elements to MatTable DataSource</h4>
<blockquote class="tr_bq">
dataSource = new MatTableDataSource<people>(ELEMENT_DATA);</blockquote>
<h4 style="text-align: left;">
Step5: Add below functions for canspeak selection </h4>
<blockquote class="tr_bq">
isAllspeakSelected(): boolean {<br />
const numRows = this.dataSource.data.length;<br />
let selectedcount : number ;<br />
selectedcount= 0 ;<br />
this.dataSource.data.forEach(ele => {<br />
if (ele.canspeak === true) {<br />
selectedcount+=1;<br />
}<br />
});<br />
if (numRows === selectedcount) {<br />
return true<br />
}<br />
return false;<br />
}<br />
<br />
SelectAllspeak(event: MatCheckboxChange ) {<br />
this.dataSource.data.forEach(ele => {<br />
ele.canspeak =event.checked;<br />
});<br />
}</blockquote>
<div>
</div>
<h4 style="text-align: left;">
Step6: Add below functions for canwrite selection </h4>
<div>
<br /></div>
<blockquote class="tr_bq">
isAllwriteSelected(): boolean {<br />
const numRows = this.dataSource.data.length;<br />
let selectedcount : number ;<br />
selectedcount= 0 ;<br />
this.dataSource.data.forEach(ele => {<br />
if (ele.canwrite === true) {<br />
selectedcount+=1;<br />
}<br />
});<br />
if (numRows === selectedcount) {<br />
<br />
return true<br />
}<br />
<br />
return false;<br />
}<br />
SelectAllwrite(event: MatCheckboxChange ) {<br />
this.dataSource.data.forEach(ele => {<br />
ele.canwrite =event.checked;<br />
});<br />
}</blockquote>
<div>
</div>
<h4 style="text-align: left;">
Step 7: Header and data of canspeak in mat table will be<br /> </h4>
<blockquote class="tr_bq">
<ng-container matColumnDef="canspeak"><br />
<th mat-header-cell *matHeaderCellDef><br />
<mat-checkbox (click)="$event.stopPropagation()" (change)="SelectAllspeak($event)"<br />
[checked]="isAllspeakSelected()"<br />
[indeterminate]="!isAllspeakSelected()"><br />
Speak?</mat-checkbox><br />
</th><br />
<td mat-cell *matCellDef="let row"><br />
<mat-checkbox (click)="$event.stopPropagation()" [value]="row.canspeak" [(ngModel)]="row.canspeak" ><br />
</mat-checkbox><br />
</td><br />
</ng-container></blockquote>
<div>
<br /></div>
<h4 style="text-align: left;">
Step 8: Header and data of canwrite in mat table will be</h4>
<blockquote class="tr_bq">
<ng-container matColumnDef="canwrite"><br />
<th mat-header-cell *matHeaderCellDef><br />
<mat-checkbox (click)="$event.stopPropagation()" (change)="SelectAllwrite($event)"<br />
[checked]="isAllwriteSelected()"<br />
[indeterminate]="!isAllwriteSelected()"><br />
Write?</mat-checkbox><br />
</th><br />
<td mat-cell *matCellDef="let row"><br />
<mat-checkbox (click)="$event.stopPropagation();"[checked]="row.canwrite" [(ngModel)]="row.canwrite" ><br />
</mat-checkbox><br />
</td><br />
</ng-container></blockquote>
<div>
<br /></div>
<div>
And run your angular project using ng serve, your output will be </div>
</div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO3lU6Wiv5NW3B9OoQv_rZz22IV3yxyjCYsgxECulpdvjbvWoXxa-b5Ik6Nbxs88-A7d5NO35ernmz9W1N27Afs571euC4rvaP3sJYXdxmlStiuwe47EAzCt0xi8wno9ocrZ-Z76NsGokG/s1600/output.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="536" data-original-width="1336" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO3lU6Wiv5NW3B9OoQv_rZz22IV3yxyjCYsgxECulpdvjbvWoXxa-b5Ik6Nbxs88-A7d5NO35ernmz9W1N27Afs571euC4rvaP3sJYXdxmlStiuwe47EAzCt0xi8wno9ocrZ-Z76NsGokG/s640/output.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Code Action @<a href="https://stackblitz.com/edit/angular-mattablemultiselectrowcolumn" rel="nofollow" target="_blank">StackBli</a>tz</div>
</div>
interfacecreatorhttp://www.blogger.com/profile/16947662416981092039noreply@blogger.com0tag:blogger.com,1999:blog-6661979576348443348.post-26011010524169541762018-09-25T10:00:00.000+05:302018-09-25T16:53:56.514+05:30Angular Flex Layout, Angular responsive layout, Angular responsive layout using flex layout<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijUPH2CAxKUzbixl5eQngrfJz2H8YCSW-bmx8LP0GNpMn7iJxZg5-1CuPNl6LG16HPZKYgOj6_wJjKYTeZbFApHVrqMdQvEEGtz4trcqAd5nN8kTU7xIM01VOlV5Sj43lUN_CFhGoDCd75/s1600/6726.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1013" data-original-width="1600" height="404" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijUPH2CAxKUzbixl5eQngrfJz2H8YCSW-bmx8LP0GNpMn7iJxZg5-1CuPNl6LG16HPZKYgOj6_wJjKYTeZbFApHVrqMdQvEEGtz4trcqAd5nN8kTU7xIM01VOlV5Sj43lUN_CFhGoDCd75/s640/6726.jpg" width="640" /></a></div>
<h2 style="text-align: center;">
Angular Flex Layout</h2>
<div>
<span style="background-color: white; color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol"; font-size: 16px;">Angular Flex Layout provides a sophisticated layout API using Flexbox CSS + mediaQuery. This module provides Angular developers with component layout features using a custom Layout API, mediaQuery observables, and injected DOM flexbox-2016 CSS stylings. </span></div>
<div>
<span style="background-color: white; color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol"; font-size: 16px;">Refer Flex Layout @<a href="https://github.com/angular/flex-layout" target="_blank">Github</a>.</span></div>
<div>
<span style="background-color: white; color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol"; font-size: 16px;"><br /></span></div>
<div>
<h3 style="text-align: left;">
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;">Step 1: Add Flexlayout to project </span></span></h3>
<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "Article",
"dateModified" : "2018-09-25",
"name" : "angular flex layout demo,Angular responsive layout,Angular responsive layout using flex layout",
"image" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijUPH2CAxKUzbixl5eQngrfJz2H8YCSW-bmx8LP0GNpMn7iJxZg5-1CuPNl6LG16HPZKYgOj6_wJjKYTeZbFApHVrqMdQvEEGtz4trcqAd5nN8kTU7xIM01VOlV5Sj43lUN_CFhGoDCd75/s640/6726.jpg",
"articleSection" : "Angular responsive layout using flex layout",
"keywords" : "Angular, Material Angular, Angular Flex Layout, angular material, Angular responsive layout,
Angular responsive layout using flex layout,angular flex layout responsive,angular flex layout demo",
"url" : "https://www.interfacecreator.com/2018/09/angular-flex-layout-angular-responsive.html",
"author" : "InterfaceCreator",
"datePublished" : "2018-09-25",
"headline" : "Angular material fixed table header,footer row and sticky column",
"publisher" : {
"@type" : "Organization",
"name" : "InterfaceCreator",
"logo": {
"@type": "ImageObject",
"name": "myOrganizationLogo",
"width": "32",
"height": "32",
"url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIxjJfxL86EHPNdBmmWhCNUvF7xtk51ayNo4K8ArIlwzphyphenhyphenySA9VOMKWr-J-PSnUJILF02FHIei3SCGCihCCV0d4cZZ7tTEMXvtWInJy5LlmB7etnUPqOHLFNQr634qsP3UAPh2qh09ZO4/s200/logo-3.png"
}
},
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://www.interfacecreator.com/2018/09/angular-flex-layout-angular-responsive.html"
}
}
</script>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Angular Flex Layout",
"item": "https://www.interfacecreator.com/2018/09/angular-flex-layout-angular-responsive.html"
},
{
"@type": "ListItem",
"position": 2,
"name": "Angular responsive layout",
"item": "https://www.interfacecreator.com/2018/09/angular-flex-layout-angular-responsive.html"
}
,
{
"@type": "ListItem",
"position": 3,
"name": "Angular responsive layout using flex layout",
"item": "https://www.interfacecreator.com/2018/09/angular-flex-layout-angular-responsive.html"
}
,
{
"@type": "ListItem",
"position": 4,
"name": "angular flex layout responsive",
"item": "https://www.interfacecreator.com/2018/09/angular-flex-layout-angular-responsive.html"
},
{
"@type": "ListItem",
"position": 5,
"name": "angular flex layout demo",
"item": "https://www.interfacecreator.com/2018/09/angular-flex-layout-angular-responsive.html"
}
]
}
</script>
<blockquote>
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;">npm i --save @angular/flex-layout</span></span></blockquote>
<h3 style="text-align: left;">
<span style="background-color: white; color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";">Step 2: Import it in app.module.ts</span></h3>
<blockquote class="tr_bq">
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;">import {FlexLayoutModule} from "@angular/flex-layout";</span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"><br /></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;">@NgModule({</span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> declarations: [</span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> AppComponent</span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> ],</span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> imports: [</span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> BrowserModule, BrowserAnimationsModule, MatButtonModule, HttpClientModule, FlexLayoutModule</span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> ],</span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> providers: [],</span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> bootstrap: [AppComponent]</span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;">})</span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;">export class AppModule { }</span></span></blockquote>
<div>
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"><br /></span></span></div>
<div>
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"><br /></span></span></div>
<h3 style="text-align: left;">
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;">Step 3: In Required Component's HTML Template Add a div with fxLayout directive</span></span></h3>
<blockquote class="tr_bq">
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"><div fxLayout></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"></div></span></span></blockquote>
<div>
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;">The fxLayout directive on the container sets the flex container. Defaults to row.</span></span></div>
<h3 style="text-align: left;">
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;">MediaQueries and Aliases</span></span></h3>
<div>
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;">breakpoint - mediaQuery</span></span></div>
<div>
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;">xs-'screen and (max-width: 599px)'</span></span></div>
<div>
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;">sm-'screen and (min-width: 600px) and (max-width: 959px)'</span></span></div>
<div>
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;">md-'screen and (min-width: 960px) and (max-width: 1279px)'</span></span></div>
<div>
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;">lg-'screen and (min-width: 1280px) and (max-width: 1919px)'</span></span></div>
<div>
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;">xl-'screen and (min-width: 1920px) and (max-width: 5000px)'</span></span></div>
<div>
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"><br /></span></span></div>
<h3 style="text-align: left;">
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;">Step 4:</span></span><span style="background-color: white; color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";">Add Below HTML snippet for Responsive Layout</span></h3>
<blockquote class="tr_bq">
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"><div fxLayout="column"></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"><div fxLayout="row" fxLayout.sm="column" fxLayout.xs="column" ></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <div></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> Row 1 </span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"></div></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <div flexorder="1" fxFlex.xs="" fxFlex.sm="" fxflex.xs="" fxflex="33%" ></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-card class="example-card" ></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <div class="example-container"></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <input matInput placeholder="Input"></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> </mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"><br /></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <textarea matInput placeholder="Textarea"></textarea></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> </mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"><br /></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-select placeholder="Select"></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-option value="option">Option</mat-option></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> </mat-select></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> </mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <div class="example-container" ></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <input matInput placeholder="Input"></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> </mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"><br /></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <textarea matInput placeholder="Textarea"></textarea></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> </mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"><br /></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-select placeholder="Select"></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-option value="option">Option</mat-option></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> </mat-select></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> </mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"></div></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"></div></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"></mat-card></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"></div></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <div flexorder="2" fxFlex.xs="" fxFlex.sm="" fxflex.xs="" fxflex="33%" ></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-card class="example-card"></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <div class="example-container"></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <input matInput placeholder="Input"></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> </mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"><br /></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <textarea matInput placeholder="Textarea"></textarea></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> </mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"><br /></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-select placeholder="Select"></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-option value="option">Option</mat-option></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> </mat-select></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> </mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"></div></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"><div class="example-container"></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <input matInput placeholder="Input"></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> </mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"><br /></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <textarea matInput placeholder="Textarea"></textarea></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> </mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"><br /></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-select placeholder="Select"></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-option value="option">Option</mat-option></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> </mat-select></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> </mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"></div></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"></mat-card></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> </div></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <div flexorder="3" fxFlex.xs="" fxFlex.sm="" fxflex.xs="" fxflex="33%" ></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-card class="example-card"></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <div class="example-container"></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <input matInput placeholder="Input"></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> </mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"><br /></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <textarea matInput placeholder="Textarea"></textarea></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> </mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"><br /></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-select placeholder="Select"></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-option value="option">Option</mat-option></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> </mat-select></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> </mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"></div></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"><div class="example-container"></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <input matInput placeholder="Input"></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> </mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"><br /></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <textarea matInput placeholder="Textarea"></textarea></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> </mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"><br /></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-select placeholder="Select"></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> <mat-option value="option">Option</mat-option></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> </mat-select></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> </mat-form-field></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"></div></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"></mat-card></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"> </div></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"></div></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"></div></span></span></blockquote>
<h3 style="text-align: left;">
<span style="background-color: white; color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";">Directives for </span>fxLayout</h3>
<blockquote class="tr_bq">
<span style="background-color: white; color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";">{ type: core.Directive, args: [{ selector: "\n [fxLayout],\n [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], </span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;">[fxLayout.xl],\n [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl],\n [fxLayout.gt-xs], [fxLayout.gt-sm], </span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;">[fxLayout.gt-md], [fxLayout.gt-lg]\n" },] },</span></span></blockquote>
<div>
<br /></div>
<div>
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;">fxLayout accepts two value row or column </span></span></div>
<div>
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;">fxLayout.xs-'screen and (max-width: 599px)'</span></span></div>
<div>
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;">fxLayout.sm-'screen and (min-width: 600px) and (max-width: 959px)'</span></span></div>
<div>
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;">fxLayout.md-'screen and (min-width: 960px) and (max-width: 1279px)'</span></span></div>
<div>
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;">fxLayout.lg-'screen and (min-width: 1280px) and (max-width: 1919px)'</span></span></div>
<div>
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;">fxLayout.xl-'screen and (min-width: 1920px) and (max-width: 5000px)'</span></span></div>
<h3 style="text-align: left;">
<span style="background-color: white; color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";">example of responsve div </span></h3>
<blockquote class="tr_bq">
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"><div fxFlex.xs="column" fxFlex.sm="column" fxflex.md="column" fxLayout.lg="row" fxLayout.xl="row" ></span></span><span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"></div></span></span></blockquote>
<div>
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;">upto width 1279px the div will be column after width 1279px it change's the appearence to row </span></span></div>
</div>
<div>
<br /></div>
<h3 style="text-align: left;">
Step 5: Output </h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9kut1iZu8ksT3tEeGv4fttXdFvG-Sgw5R1AX_qC9IC4sTAAbQJUwix6iYDXb9CZ3hyphenhyphensctKT_BwGo4lvDUlBBAupptoTRH8Zykk6UQyTexDwX1nLBTYZb-PqfDnDDgIX3LE7mpIiux5nc9/s1600/On+Ipad+Pro.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="466" data-original-width="1335" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9kut1iZu8ksT3tEeGv4fttXdFvG-Sgw5R1AX_qC9IC4sTAAbQJUwix6iYDXb9CZ3hyphenhyphensctKT_BwGo4lvDUlBBAupptoTRH8Zykk6UQyTexDwX1nLBTYZb-PqfDnDDgIX3LE7mpIiux5nc9/s640/On+Ipad+Pro.png" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoDVZ1f0yltHYJ-uuYu9fEx-Db-UVGEHmmPxv8O0QBpPJiEjtD1OU4uCTqDujgiieaHLdvrOCcDYQ2M16DHK7RUSzWp9pDWYdaM5KU_wi2yQyNkjjaZuqLoiFLy26R4AzHDL9aD2n6fAxs/s1600/On+Ipad.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="467" data-original-width="1282" height="232" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoDVZ1f0yltHYJ-uuYu9fEx-Db-UVGEHmmPxv8O0QBpPJiEjtD1OU4uCTqDujgiieaHLdvrOCcDYQ2M16DHK7RUSzWp9pDWYdaM5KU_wi2yQyNkjjaZuqLoiFLy26R4AzHDL9aD2n6fAxs/s640/On+Ipad.png" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjL1byBwnUTC2GBTIGI7jSGtcQjVbaTiN41sTq2TQ2GGceUHgsTiJv_FSOQYn8roDHK1hC8YekC7-pr9YQFT5-4ltLi_7sFBSx-BSvk6lXQAOMyp0ouFPolqvILSlAXXe8ypaVXlkwmk0H/s1600/On+XL+Screen.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="394" data-original-width="1328" height="188" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjL1byBwnUTC2GBTIGI7jSGtcQjVbaTiN41sTq2TQ2GGceUHgsTiJv_FSOQYn8roDHK1hC8YekC7-pr9YQFT5-4ltLi_7sFBSx-BSvk6lXQAOMyp0ouFPolqvILSlAXXe8ypaVXlkwmk0H/s640/On+XL+Screen.png" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI3RG79CRksMxvvhAwpIh_lJ8qxo29JhHWDx27o0B2EmOAWwkpaSjynOxrTJhhmielS9Pvg9x7BOPEFj5_7ypfwqIAfDH7wlzyXDk93kzwtXYhdfWEe8lBi_5kTXepcpEOXXS-1IedUv3j/s1600/Pixcel+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="475" data-original-width="578" height="524" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI3RG79CRksMxvvhAwpIh_lJ8qxo29JhHWDx27o0B2EmOAWwkpaSjynOxrTJhhmielS9Pvg9x7BOPEFj5_7ypfwqIAfDH7wlzyXDk93kzwtXYhdfWEe8lBi_5kTXepcpEOXXS-1IedUv3j/s640/Pixcel+2.png" width="640" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Code Action @ <a href="https://stackblitz.com/edit/angularwithflexlayout" rel="nofollow" target="_blank">StackBlitz</a></div>
<div>
<br /></div>
</div>
</div>
interfacecreatorhttp://www.blogger.com/profile/16947662416981092039noreply@blogger.com0