tag:blogger.com,1999:blog-78326126357920314842024-03-13T14:08:28.088+05:30Angular 6 Tutorials.......It is a Code Heven for XAF Developers
You can Find Your solutions.Nagendrahttp://www.blogger.com/profile/05204068804623434613noreply@blogger.comBlogger123125tag:blogger.com,1999:blog-7832612635792031484.post-51293791203092301192020-01-06T00:49:00.002+05:302020-01-06T00:50:07.574+05:30Mat Table Angular<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 _ngcontent-kdx-c0="" align="center" style="font-family: Roboto, "Helvetica Neue", sans-serif;">
Mat Table in Angular</h1>
<br />
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: "roboto" , "arial" , sans-serif; font-size: 14px; white-space: pre-wrap;">Mat table is used to display data . its a material designed styled data-table . For using Material Table MatTableModule need to install/add in project.</span><br />
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: "roboto" , "arial" , sans-serif; font-size: 14px; white-space: pre-wrap;"><br /></span>
<span style="background-color: #f9f9f9; color: #0d0d0d; font-family: "roboto" , "arial" , sans-serif; font-size: 14px; white-space: pre-wrap;"> import {MatTableModule} form '@angular/material'</span><br />
<br />
<br />
For using this you need to install Angular Material<br />
<br />
ng add @angular/material<br />
<br />
C:\AngularService\myservice> ng add @angular/material<br />
<br />
Installing packages for tooling via npm.<br />
Installed packages for tooling via npm.<br />
? Choose a prebuilt theme name, or "custom" for a custom theme: Purple/Green <br />
[ Preview: https://material.angular.io?theme=purple-green<br />
]<br />
? Set up HammerJS for gesture recognition? (Y/n) n<br />
<br />
You Can Choose any Theme<br />
<br />
And you can add/remove HammerJS also<br />
<br />
Set up browser animations for Angular Material? (Y/n) Y<br />
<div>
<br /></div>
<br />
<h2 style="text-align: left;">
<i><u>App.Module.ts</u></i></h2>
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div>
<span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">BrowserModule</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'@angular/platform-browser'</span>;</div>
<div>
<span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">NgModule</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'@angular/core'</span>;</div>
<div>
<span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">AppComponent</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'./app.component'</span>;</div>
<div>
<span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">HttpClientModule</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'@angular/common/http'</span>;</div>
<div>
<span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">EmpserviceService</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'./empservice.service'</span>;</div>
<div>
<span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">MycomComponent</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'./mycom/mycom.component'</span>;</div>
<div>
<span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">BrowserAnimationsModule</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'@angular/platform-browser/animations'</span>;</div>
<div>
<span style="color: #c586c0;">import</span> {<span style="color: #9cdcfe;">MatTableModule</span>} <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'@angular/material/table'</span>;</div>
<div>
<span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">EmpdetailsComponent</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'./empdetails/empdetails.component'</span></div>
<div>
@<span style="color: #dcdcaa;">NgModule</span>({</div>
<div>
<span style="color: #9cdcfe;">declarations:</span> [</div>
<div>
<span style="color: #9cdcfe;">AppComponent</span>,</div>
<div>
<span style="color: #9cdcfe;">MycomComponent</span>,</div>
<div>
<span style="color: #9cdcfe;">EmpdetailsComponent</span></div>
<div>
],</div>
<div>
<span style="color: #9cdcfe;">imports:</span> [</div>
<div>
<span style="color: #9cdcfe;">BrowserModule</span>,</div>
<div>
<span style="color: #9cdcfe;">HttpClientModule</span>,</div>
<div>
<span style="color: #9cdcfe;">BrowserAnimationsModule</span>,</div>
<div>
<span style="color: #9cdcfe;">MatTableModule</span></div>
<div>
],</div>
<div>
<span style="color: #9cdcfe;">providers:</span> [<span style="color: #9cdcfe;">HttpClientModule</span>,<span style="color: #9cdcfe;">EmpserviceService</span>],</div>
<div>
</div>
<div>
<span style="color: #9cdcfe;">bootstrap:</span> [<span style="color: #9cdcfe;">AppComponent</span>]</div>
<div>
})</div>
<div>
<span style="color: #c586c0;">export</span> <span style="color: #569cd6;">class</span> <span style="color: #4ec9b0;">AppModule</span> { }</div>
</div>
<br />
<h2 style="text-align: left;">
<i><u>App.Component.Html</u></i></h2>
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<br />
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">h1</span> <span style="color: #f44747;">align</span> = <span style="color: #ce9178;">"center"</span><span style="color: grey;">></span>Mat Table in Angular<span style="color: grey;"></</span><span style="color: #569cd6;">h1</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">h3</span> <span style="color: #f44747;">align</span> = <span style="color: #ce9178;">"center"</span><span style="color: grey;">></span>Shubh Techno Expert <span style="color: grey;"></</span><span style="color: #569cd6;">h3</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">h3</span> <span style="color: #f44747;">align</span> = <span style="color: #ce9178;">"center"</span><span style="color: grey;">></span>http://xafdeveloper.blogspot.com <span style="color: grey;"></</span><span style="color: #569cd6;">h3</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">h3</span> <span style="color: #f44747;">align</span> = <span style="color: #ce9178;">"center"</span><span style="color: grey;">></span>http://ShubhTechnoExpert.blogspot.com <span style="color: grey;"></</span><span style="color: #569cd6;">h3</span><span style="color: grey;">></span></div>
<br />
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span> = <span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">(click)</span> =<span style="color: #ce9178;">"GetEmpDetails()"</span> <span style="color: #f44747;">align</span> =<span style="color: #ce9178;">"Center"</span> <span style="color: grey;">></span>Click Me To Display Data<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div>
<br />
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">br</span><span style="color: grey;">></span></div>
<br />
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #f44747;">align</span> = <span style="color: #ce9178;">"center"</span> <span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">table</span> <span style="color: #9cdcfe;">mat-table</span> <span style="color: #9cdcfe;">[dataSource]</span>=<span style="color: #ce9178;">"dataSource"</span> <span style="color: #f44747;">border</span> =<span style="color: #ce9178;">"3"</span> <span style="color: grey;">></span></div>
<div>
</div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">ng-container</span> <span style="color: #9cdcfe;">matColumnDef</span>=<span style="color: #ce9178;">"EmpName"</span> <span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">th</span> <span style="color: #9cdcfe;">mat-header-cell</span> <span style="color: #9cdcfe;">*matHeaderCellDef</span> <span style="color: grey;">></span>Employee Name<span style="color: grey;"></</span><span style="color: #569cd6;">th</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">td</span> <span style="color: #9cdcfe;">mat-cell</span> <span style="color: #9cdcfe;">*matCellDef</span>=<span style="color: #ce9178;">"let item"</span><span style="color: grey;">></span>{{item.EmpName}}<span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">ng-container</span><span style="color: grey;">></span></div>
<br />
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">ng-container</span> <span style="color: #9cdcfe;">matColumnDef</span>=<span style="color: #ce9178;">"EMPCode"</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">th</span> <span style="color: #9cdcfe;">mat-header-cell</span> <span style="color: #9cdcfe;">*matHeaderCellDef</span> <span style="color: grey;">></span>Employee Code<span style="color: grey;"></</span><span style="color: #569cd6;">th</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">td</span> <span style="color: #9cdcfe;">mat-cell</span> <span style="color: #9cdcfe;">*matCellDef</span>=<span style="color: #ce9178;">"let item"</span><span style="color: grey;">></span>{{item.EMPCode}}<span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">ng-container</span><span style="color: grey;">></span></div>
<div>
</div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">tr</span> <span style="color: #9cdcfe;">mat-header-row</span> <span style="color: #9cdcfe;">*matHeaderRowDef</span>=<span style="color: #ce9178;">"columnsToDisplay"</span><span style="color: grey;">></</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">tr</span> <span style="color: #9cdcfe;">mat-row</span> <span style="color: #9cdcfe;">*matRowDef</span>=<span style="color: #ce9178;">"let row; columns: columnsToDisplay"</span><span style="color: grey;">></</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
</div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">table</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
</div>
<br />
<br />
<h2 style="text-align: left;">
<i><u>app.component.ts </u></i></h2>
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div>
<span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">Component</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'@angular/core'</span>;</div>
<div>
<span style="color: #c586c0;">import</span> {<span style="color: #9cdcfe;">EmpserviceService</span>} <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'./empservice.service'</span></div>
<div>
<span style="color: #c586c0;">import</span> {<span style="color: #9cdcfe;">MatTableModule</span>,<span style="color: #9cdcfe;">MatTableDataSource</span>} <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'@angular/material/table'</span>;</div>
<br />
<div>
@<span style="color: #dcdcaa;">Component</span>({</div>
<div>
<span style="color: #9cdcfe;">selector:</span> <span style="color: #ce9178;">'app-root'</span>,</div>
<div>
<span style="color: #9cdcfe;">templateUrl:</span> <span style="color: #ce9178;">'./app.component.html'</span>,</div>
<div>
<span style="color: #9cdcfe;">styleUrls:</span> [<span style="color: #ce9178;">'./app.component.css'</span>]</div>
<div>
})</div>
<div>
<span style="color: #c586c0;">export</span> <span style="color: #569cd6;">class</span> <span style="color: #4ec9b0;">AppComponent</span> {</div>
<div>
</div>
<div>
<br /></div>
<div>
<span style="color: #9cdcfe;">dataSource</span> = <span style="color: #569cd6;">new</span> <span style="color: #4ec9b0;">MatTableDataSource</span>();</div>
<div>
<span style="color: #9cdcfe;">columnsToDisplay</span> = [<span style="color: #ce9178;">'EmpName'</span>, <span style="color: #ce9178;">'EMPCode'</span>];</div>
<br />
<div>
<span style="color: #569cd6;">constructor</span>(<span style="color: #569cd6;">private</span> <span style="color: #9cdcfe;">_EmpserviceService</span>:<span style="color: #4ec9b0;">EmpserviceService</span>){}</div>
<br />
<div>
<span style="color: #dcdcaa;">GetEmpDetails</span>(){</div>
<div>
<span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">_EmpserviceService</span>.<span style="color: #dcdcaa;">GetEmployeDetails</span>().<span style="color: #dcdcaa;">subscribe</span>((<span style="color: #9cdcfe;">respp</span>)<span style="color: #569cd6;">=></span></div>
<div>
{ </div>
<div>
<span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">dataSource</span>.<span style="color: #9cdcfe;">data</span> = <span style="color: #9cdcfe;">respp</span>;</div>
<br />
<div>
})</div>
<div>
}</div>
<div>
}</div>
</div>
<br />
<br />
Follow us on youtube <a href="https://youtu.be/LAlKeSVmkvI" target="_blank"><b>Shubh Techno Expert </b></a><br />
please subscribe .<br />
<br />
<br />
<br /></div>
Nagendrahttp://www.blogger.com/profile/05204068804623434613noreply@blogger.com0tag:blogger.com,1999:blog-7832612635792031484.post-74685791977501125802019-12-15T21:49:00.000+05:302019-12-15T21:49:12.454+05:30Pagination in Angular<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
<span style="font-weight: normal;">Pagination in Angular</span></h2>
<br />
To use Pagination <b>NgxPaginationModule </b>need to install<br />
<br />
npm install --save ngx-pagination<br />
<br />
once this is installed then add this module in <b>app.module.ts</b> and in <b>import </b>array<br />
<b><br /></b>
<h2 style="text-align: left;">
<i><u><b>app.module.ts</b> </u></i></h2>
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div>
<div style="line-height: 19px;">
<span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">NgxPaginationModule</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'ngx-pagination'</span>;</div>
</div>
<div style="line-height: 19px;">
<br /></div>
<div>
<span style="color: #9cdcfe;">imports:</span> [</div>
<div>
<span style="color: #9cdcfe;">NgxPaginationModule</span>,</div>
<div>
</div>
<div>
],</div>
</div>
<br />
<br />
<h2 style="text-align: left;">
<i><u>app.Component.Html</u></i></h2>
<br />
in HTML we have create a list item in which we will apply pagination .<br />
<br />
we have used paginate event to apply this . in ngFor itemsparpage is used to see how many item will be displayed .<br />
<br />
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">h1</span><span style="color: grey;">></span>Employee List<span style="color: grey;"></</span><span style="color: #569cd6;">h1</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">ul</span><span style="color: grey;">></span></div>
<br /><div>
<span style="color: grey;"><</span><span style="color: #569cd6;">li</span> <span style="color: #9cdcfe;">*ngFor</span> = <span style="color: #ce9178;">"let item of EmpListcollection | paginate: { itemsPerPage: 10, currentPage: p } "</span> <span style="color: grey;">></span></div>
<div>
{{item}}</div>
<br /><div>
<span style="color: grey;"></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">ul</span><span style="color: grey;">></span></div>
<br /><div>
<span style="color: grey;"><</span><span style="color: #569cd6;">pagination-controls</span> <span style="color: #9cdcfe;">(pageChange)</span>=<span style="color: #ce9178;">"p = $event"</span><span style="color: grey;">></</span><span style="color: #569cd6;">pagination-controls</span><span style="color: grey;">></span></div>
</div>
<br />
<h2 style="text-align: left;">
<i><u>app.component.ts</u></i></h2>
in type script file we have created a collection which will be binded in list in HTML component<br />
<br />
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div>
<span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">Component</span>, <span style="color: #9cdcfe;">OnInit</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'@angular/core'</span>;</div>
<div>
<span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">stringify</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'querystring'</span>;</div>
<br /><br /><div>
@<span style="color: #dcdcaa;">Component</span>({</div>
<div>
<span style="color: #9cdcfe;">selector:</span> <span style="color: #ce9178;">'app-component'</span>,</div>
<div>
<span style="color: #9cdcfe;">templateUrl:</span> <span style="color: #ce9178;">'./app.component.html'</span>,</div>
<div>
<span style="color: #9cdcfe;">styleUrls:</span> [<span style="color: #ce9178;">'./app.component.css'</span>]</div>
<div>
})</div>
<div>
<span style="color: #c586c0;">export</span> <span style="color: #569cd6;">class</span> app<span style="color: #4ec9b0;">Component</span> <span style="color: #569cd6;">implements</span> <span style="color: #4ec9b0;">OnInit</span> {</div>
<br /><div>
<span style="color: #9cdcfe;">EmpListcollection</span> = [];</div>
<div>
<span style="color: #9cdcfe;">mystring</span> : <span style="color: #4ec9b0;">string</span> ;</div>
<br /><div>
<span style="color: #569cd6;">constructor</span>() { }</div>
<br /><div>
<span style="color: #dcdcaa;">ngOnInit</span>() {</div>
<div>
</div>
<div>
<span style="color: #c586c0;">for</span> (<span style="color: #569cd6;">let</span> <span style="color: #9cdcfe;">i</span> =<span style="color: #b5cea8;">1</span>;<span style="color: #9cdcfe;">i</span><<span style="color: #b5cea8;">50</span>;<span style="color: #9cdcfe;">i</span>++)</div>
<div>
{</div>
<div>
<span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">mystring</span> = <span style="color: #ce9178;">'Angular'</span>;</div>
<div>
<span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">mystring</span> = <span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">mystring</span>.<span style="color: #dcdcaa;">concat</span>(<span style="color: #ce9178;">' Tyepscript '</span> + <span style="color: #9cdcfe;">i</span> + <span style="color: #ce9178;">'.0'</span>);</div>
<div>
<span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">EmpListcollection</span>.<span style="color: #dcdcaa;">push</span>(<span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">mystring</span>)</div>
<div>
}</div>
<div>
}</div>
<div>
}</div>
</div>
<br />
<br />
<h2 style="text-align: left;">
<i><u>Output .</u></i></h2>
<div>
<i><u><br /></u></i></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4VeVrVZkCN33cz-P7Jf9BSJELCKZUFx0Il2g-Rnd7GL1azw1gXfFiRNkfyJKxSKvspzIiuV5xLpxYjR9jHeab1EM9wi499mZ68PrRAnnRgGhoF6jFJYFWVkgNwGet1yiU1jggvQJ_1R8/s1600/Pagination.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="501" data-original-width="578" height="276" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4VeVrVZkCN33cz-P7Jf9BSJELCKZUFx0Il2g-Rnd7GL1azw1gXfFiRNkfyJKxSKvspzIiuV5xLpxYjR9jHeab1EM9wi499mZ68PrRAnnRgGhoF6jFJYFWVkgNwGet1yiU1jggvQJ_1R8/s320/Pagination.JPG" width="320" /></a></div>
Follow us on <b>Shubh Techno Expert </b><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /></div>
Nagendrahttp://www.blogger.com/profile/05204068804623434613noreply@blogger.com0tag:blogger.com,1999:blog-7832612635792031484.post-47706944565322266382019-12-15T21:08:00.001+05:302019-12-15T21:08:29.543+05:30How to use Service in Angular App<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
How to call service in Angular App </h2>
<br />
component can not fetch data directly from database. so to fetch data from database API need to call in Angular App . With the help of service we can access method and properties across other component in the entire Projects<br />
<br />
1. For this We need a Web API which we will call in our App to access the data .<br />
<br />
Syntax to create Service<br />
<br />
<b>ng generate service servicename </b><br />
<b><br /></b>API URL : http://localhost:37187/Api/ViewContact/ViewEmpDetails<br />
<br />
This API will Return data in Json Format .<br />
<br />
{<br />
"EMPCode": "E0001",<br />
"EmpName": "Nagendra1",<br />
"Email": "Nagendra@gmail.com",<br />
"Salary": "2500"<br />
},<br />
{<br />
"EMPCode": "E0002",<br />
"EmpName": "Nagendra2",<br />
"Email": "Nagendra@gmail.com",<br />
"Salary": "2700"<br />
},<br />
<br />
<br />
<b>Add this Module in App.Module.ts file </b><br />
<br />
<span style="color: #351c75;">import { HttpClient } from '@angular/common/http';</span><br />
<br />
and add in import array also<br />
<br />
import:[<br />
<br />
<span style="white-space: pre;"> </span>HttpClientModule<br />
<br />
]<br />
<div>
<br /></div>
<div>
<br />
see this full VDO on youtube on <b>Shubh Techno Expert <a href="https://youtu.be/5fpC1XIRw6I">Call web API in Angular</a></b></div>
<div>
<br /></div>
<h2 style="text-align: left;">
<i><u>app.component.html</u></i></h2>
<div>
Here in HTML added one button in which called a method this method GetEmpDetails() will call the service and return the data .</div>
<div>
<br /></div>
<div>
And taken one table to bind this data .</div>
<div>
<i><u><br /></u></i></div>
<div>
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: consolas, "courier new", monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<br />
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">h1</span> <span style="color: #f44747;">align</span> = <span style="color: #ce9178;">"center"</span><span style="color: grey;">></span>How to use Service in Angular App<span style="color: grey;"></</span><span style="color: #569cd6;">h1</span><span style="color: grey;">></span></div>
<br />
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">type</span> = <span style="color: #ce9178;">"button"</span> <span style="color: #9cdcfe;">(click)</span> =<span style="color: #ce9178;">"GetEmpDetails()"</span> <span style="color: #f44747;">align</span> =<span style="color: #ce9178;">"Center"</span> <span style="color: grey;">></span>Click Me<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div>
<br />
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">table</span> <span style="color: #f44747;">border</span> =<span style="color: #ce9178;">"3"</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">th</span><span style="color: grey;">></span>EmpName<span style="color: grey;"></</span><span style="color: #569cd6;">th</span><span style="color: grey;">><</span><span style="color: #569cd6;">th</span><span style="color: grey;">></span>EmpCode<span style="color: grey;"></</span><span style="color: #569cd6;">th</span><span style="color: grey;">><</span><span style="color: #569cd6;">th</span><span style="color: grey;">></span>Salary<span style="color: grey;"></</span><span style="color: #569cd6;">th</span><span style="color: grey;">><</span><span style="color: #569cd6;">th</span><span style="color: grey;">></span>Email<span style="color: grey;"></</span><span style="color: #569cd6;">th</span><span style="color: grey;">></span></div>
<br />
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">tr</span> <span style="color: #9cdcfe;">*ngFor</span> = <span style="color: #ce9178;">"let item of EmpServiceresponse"</span><span style="color: grey;">></span></div>
<br />
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span> {{item.EmpName}}<span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span>{{item.EMPCode}}<span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span> {{item.Salary}}<span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span>{{item.Email}}<span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<br />
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<br />
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">table</span><span style="color: grey;">></span></div>
</div>
</div>
<div>
<br /></div>
<h2 style="text-align: left;">
<i><u>app.component.ts</u></i></h2>
<div>
in app.component we have created the method to call the service . and initiated the service in constructor .</div>
<div>
<i><u><br /></u></i></div>
<div>
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: consolas, "courier new", monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div>
<span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">Component</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'@angular/core'</span>;</div>
<div>
<span style="color: #c586c0;">import</span> {<span style="color: #9cdcfe;">EmpserviceService</span>} <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'./empservice.service'</span></div>
<br />
<div>
@<span style="color: #dcdcaa;">Component</span>({</div>
<div>
<span style="color: #9cdcfe;">selector:</span> <span style="color: #ce9178;">'app-root'</span>,</div>
<div>
<span style="color: #9cdcfe;">templateUrl:</span> <span style="color: #ce9178;">'./app.component.html'</span>,</div>
<div>
<span style="color: #9cdcfe;">styleUrls:</span> [<span style="color: #ce9178;">'./app.component.css'</span>]</div>
<div>
})</div>
<div>
<span style="color: #c586c0;">export</span> <span style="color: #569cd6;">class</span> <span style="color: #4ec9b0;">AppComponent</span> {</div>
<div>
<span style="color: #9cdcfe;">title</span> = <span style="color: #ce9178;">'MyService'</span>;</div>
<div>
<span style="color: #9cdcfe;">EmpServiceresponse</span> : <span style="color: #4ec9b0;">any</span> ;</div>
<br />
<div>
<span style="color: #569cd6;">constructor</span>(<span style="color: #569cd6;">private</span> <span style="color: #9cdcfe;">_EmpserviceService</span>:<span style="color: #4ec9b0;">EmpserviceService</span> ){}</div>
<div>
<span style="color: #dcdcaa;">GetEmpDetails</span>(){</div>
<br />
<div>
<span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">_EmpserviceService</span>.<span style="color: #dcdcaa;">GetEmployeDetails</span>().<span style="color: #dcdcaa;">subscribe</span>((<span style="color: #9cdcfe;">respp</span>)<span style="color: #569cd6;">=></span></div>
<div>
{</div>
<div>
<span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">EmpServiceresponse</span> = <span style="color: #9cdcfe;">respp</span>;</div>
<div>
<span style="color: #4ec9b0;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">EmpServiceresponse</span>);</div>
<br />
<div>
})</div>
<div>
}</div>
<div>
}</div>
</div>
</div>
<div>
<i><u><br /></u></i></div>
<h2 style="text-align: left;">
<i><u>empentities.ts</u></i></h2>
<div>
This is the Entities in which data will be mapped.</div>
<div>
<i><u><br /></u></i></div>
<div>
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: consolas, "courier new", monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div>
<span style="color: #c586c0;">export</span> <span style="color: #569cd6;">class</span> <span style="color: #4ec9b0;">Empentities</span> {</div>
<br />
<div>
<span style="color: #9cdcfe;">EMPCode</span>: <span style="color: #4ec9b0;">string</span>;</div>
<div>
<span style="color: #9cdcfe;">EmpName</span>: <span style="color: #4ec9b0;">string</span>;</div>
<div>
<span style="color: #9cdcfe;">Email</span>: <span style="color: #4ec9b0;">string</span>;</div>
<div>
<span style="color: #9cdcfe;">Salary</span> : <span style="color: #4ec9b0;">number</span>;</div>
<div>
}</div>
</div>
</div>
<div>
<i><u><br /></u></i></div>
<h2 style="text-align: left;">
<i><u>empservice.service.ts</u></i></h2>
<div>
we have created this service by below command </div>
<div>
<b><br /></b></div>
<div>
<b>ng g service Empservice</b></div>
<div>
<i><u><br /></u></i></div>
<div>
once service is created then we will provide API url and call it in a method and provide its return type as JSON</div>
<div>
<i><u><br /></u></i></div>
<div>
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: consolas, "courier new", monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div>
<span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">Injectable</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'@angular/core'</span>;</div>
<div>
<span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">HttpClient</span> , <span style="color: #9cdcfe;">HttpResponse</span>, <span style="color: #9cdcfe;">HttpHeaders</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'@angular/common/http'</span>; </div>
<div>
<span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">Empentities</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'./model/empentities'</span>;</div>
<div>
<span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">Observable</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'rxjs'</span>;</div>
<br />
<div>
@<span style="color: #dcdcaa;">Injectable</span>({</div>
<div>
<span style="color: #9cdcfe;">providedIn:</span> <span style="color: #ce9178;">'root'</span></div>
<div>
})</div>
<div>
<span style="color: #c586c0;">export</span> <span style="color: #569cd6;">class</span> <span style="color: #4ec9b0;">EmpserviceService</span> {</div>
<div>
</div>
<div>
<span style="color: #9cdcfe;">url</span> = <span style="color: #ce9178;">'http://localhost:37187/Api/ViewContact/'</span>; </div>
<br />
<div>
<span style="color: #569cd6;">constructor</span>(<span style="color: #569cd6;">private</span> <span style="color: #9cdcfe;">http</span>:<span style="color: #4ec9b0;">HttpClient</span>) { }</div>
<br />
<div>
<span style="color: #dcdcaa;">GetEmployeDetails</span>(): <span style="color: #4ec9b0;">Observable</span><<span style="color: #4ec9b0;">Empentities</span>[]> { </div>
<div>
</div>
<div>
<span style="color: #c586c0;">return</span> <span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">http</span>.<span style="color: #dcdcaa;">post</span><<span style="color: #4ec9b0;">Empentities</span>[]>(<span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">url</span>+<span style="color: #ce9178;">'/ViewEmpDetails'</span>, </div>
<div>
{<span style="color: #9cdcfe;">headers:</span><span style="color: #569cd6;">new</span> <span style="color: #4ec9b0;">HttpHeaders</span>({<span style="color: #ce9178;">'Content-Type'</span><span style="color: #9cdcfe;">:</span><span style="color: #ce9178;">'application/json'</span>})});</div>
<div>
} </div>
<br />
<div>
}</div>
</div>
</div>
<div>
<i><u><br /></u></i></div>
<h2 style="text-align: left;">
<i><u>app.module.ts</u></i></h2>
<div>
In App.module we will register our service and add the <span style="background-color: #1e1e1e; color: yellow; font-family: "consolas" , "courier new" , monospace; font-size: 14px; white-space: pre;">HttpClientModule </span>Module in Import array .</div>
<div>
<i><u><br /></u></i></div>
<div>
<div style="background-color: #1e1e1e; font-family: consolas, "courier new", monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div style="color: #d4d4d4;">
<span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">BrowserModule</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'@angular/platform-browser'</span>;</div>
<div style="color: #d4d4d4;">
<span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">NgModule</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'@angular/core'</span>;</div>
<div style="color: #d4d4d4;">
<span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">AppComponent</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'./app.component'</span>;</div>
<div>
<span style="color: yellow;">import { HttpClientModule } from '@angular/common/http';</span></div>
<div>
<span style="color: yellow;">import { EmpserviceService } from './empservice.service';</span></div>
<span style="color: #d4d4d4;"><br /></span>
<br />
<div style="color: #d4d4d4;">
@<span style="color: #dcdcaa;">NgModule</span>({</div>
<div style="color: #d4d4d4;">
<span style="color: #9cdcfe;">declarations:</span> [</div>
<div style="color: #d4d4d4;">
<span style="color: #9cdcfe;">AppComponent</span></div>
<div style="color: #d4d4d4;">
],</div>
<div style="color: #d4d4d4;">
<span style="color: #9cdcfe;">imports:</span> [</div>
<div style="color: #d4d4d4;">
<span style="color: #9cdcfe;">BrowserModule</span>,</div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: yellow;">HttpClientModule,</span></div>
<div style="color: #d4d4d4;">
],</div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: yellow;">providers: [HttpClientModule,EmpserviceService],</span></div>
<div style="color: #d4d4d4;">
</div>
<div style="color: #d4d4d4;">
<span style="color: #9cdcfe;">bootstrap:</span> [<span style="color: #9cdcfe;">AppComponent</span>]</div>
<div style="color: #d4d4d4;">
})</div>
<div style="color: #d4d4d4;">
<span style="color: #c586c0;">export</span> <span style="color: #569cd6;">class</span> <span style="color: #4ec9b0;">AppModule</span> { }</div>
<span style="color: #d4d4d4;"><br /></span></div>
</div>
<div>
<i><u><br /></u></i></div>
<h2 style="text-align: left;">
<i><u>output</u></i></h2>
<div>
<i><u>click on Button you will get the reponse </u></i></div>
<div>
<i><u><br /></u></i></div>
<div>
<i><u>Right click chosse <b>inpect Element</b> and see the response on Console</u></i></div>
<div>
<i><u><br /></u></i></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPiy41aT18sg6oKkyXKLslnH-YvpS8DO5fe9aCUFv5vXcEHHDcr1zldZ893dVpQWcedbW1xSToeuBgvhzeGO2YpWn_sdDTsA_KAbkjdCRgb_BQ4p-QQT1R6SAQtNNyDglMHo8k6_iytFU/s1600/Output.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="676" data-original-width="954" height="226" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPiy41aT18sg6oKkyXKLslnH-YvpS8DO5fe9aCUFv5vXcEHHDcr1zldZ893dVpQWcedbW1xSToeuBgvhzeGO2YpWn_sdDTsA_KAbkjdCRgb_BQ4p-QQT1R6SAQtNNyDglMHo8k6_iytFU/s320/Output.JPG" width="320" /></a></div>
<div>
<i><u><br /></u></i></div>
<div>
<u style="font-style: italic;">Follow us : </u> <b><a href="https://youtu.be/5fpC1XIRw6I">Shubh Techno Expert</a> on Youtube </b></div>
</div>
Nagendrahttp://www.blogger.com/profile/05204068804623434613noreply@blogger.com0tag:blogger.com,1999:blog-7832612635792031484.post-47046312703588590102019-12-10T10:06:00.002+05:302019-12-10T10:06:54.314+05:30LocalStorage and session storage in Angular<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: left;">
<span style="color: #cc0000;">How to access Local and Session variable in Angular</span></h2>
<br />
To Set Value in Session storage<br />
<br />
Sessionstorage.SetItem('key','value')<br />
<br />
To get Value from Session storage<br />
<br />
Sessionstorage.getitem('key')<br />
<br />
To set Value in Local storage<br />
<br />
localstorage.SetItem('key','value')<br />
<br />
To get Value from Local storage<br />
<br />
sessionstorage.getitem('key')<br />
<br />
How to Clear Session variable<br />
<br />
sessionstorage.clear()<br />
<br />
How to remove all session items .<br />
<br />
sessionstorage.removeitem('key')<br />
<br />
local storage works like Viewstate and session storage work like session variable .<br />
<br />
http://xafdeveloper.blogspot.com<br />
<br />
https://youtu.be/povG03z340E<br />
<div>
<br /></div>
</div>
Nagendrahttp://www.blogger.com/profile/05204068804623434613noreply@blogger.com0tag:blogger.com,1999:blog-7832612635792031484.post-65745076431532496792019-11-30T19:25:00.002+05:302019-11-30T19:43:41.696+05:30Angular Production Build<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<h2 style="background-color: white; color: #1c1e21; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px;">
Build Angular App for Production</h2>
<div style="background-color: white; color: #1c1e21; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px;">
<br /></div>
<div style="background-color: white; color: #1c1e21; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px; margin-top: 6px;">
while you plan for production release then keep these things in Mind</div>
<div style="background-color: white; color: #1c1e21; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px; margin-top: 6px;">
<br /></div>
<div style="background-color: white; color: #1c1e21; font-family: Helvetica, Arial, sans-serif; margin-bottom: 6px; margin-top: 6px;">
<span style="font-size: large;"><b>ng build --prod --base--href /vdname/</b></span></div>
<div class="text_exposed_show" style="display: inline; font-family: Helvetica, Arial, sans-serif; font-size: 14px;">
<div style="background-color: white; color: #1c1e21; font-family: inherit; margin-bottom: 6px;">
<br /></div>
<div style="font-family: inherit; margin-bottom: 6px;">
<span style="background-color: white; color: #1c1e21;">above command will create a production build in your app folder . a </span><b><span style="background-color: #eeeeee; color: #b45f06;">dist</span></b><span style="color: #1c1e21;"><span style="background-color: #eeeeee;"> </span><span style="background-color: white;">folder will be added in your app folder with name "</span></span><span style="background-color: white; color: #990000;">dist</span><span style="background-color: white; color: #1c1e21;">".</span></div>
<div style="font-family: inherit; margin-bottom: 6px;">
<span style="background-color: white;"><span style="color: #1c1e21;"><br /></span></span></div>
<div style="background-color: white; color: #1c1e21; font-family: inherit; margin-bottom: 6px; margin-top: 6px;">
This dist folder will have all build files .</div>
<div style="background-color: white; color: #1c1e21; font-family: inherit; margin-bottom: 6px; margin-top: 6px;">
<br /></div>
<div style="background-color: white; color: #1c1e21; font-family: inherit; margin-bottom: 6px; margin-top: 6px;">
<b>Note1 :</b> keep in mind that <b>vdname</b> and your actual <b>vd </b>name where you will do the deployment always will be the same .</div>
<div style="background-color: white; color: #1c1e21; font-family: inherit; margin-bottom: 6px; margin-top: 6px;">
suppose your hosting address is <a data-ft="{"tn":"-U"}" data-lynx-mode="async" data-lynx-uri="https://l.facebook.com/l.php?u=https%3A%2F%2Fwww.xafdeveloper.blogspot.com%2F%3Ffbclid%3DIwAR1rlCRPe0X2339Ae8QFZ04LhH8VcG-kHg7JRGE5gQwVCUCV85Q0X7qBWUA&h=AT2hUl0DLBxauAYCEhWXH_t6OTlYaADEht5HDk7JtQnnfbLB_2wXLGdkvCRFz2ViEcTltujcJgll4Z5II8VHjmsT4FR_ysec9jq4sR-dho_39PVYLA9XwjRojHroybNM9kTSZu0Ce_wQMd8KHlJ2IGTWQt6BiOy2XXENVRWHrXp0Hv7TsCgjaqutNVlYtJmIR8nAqV1m6wa20UcrTJ_3xtP3tNOaFsO35pagIZKZPGxWpdaCRj8e0TUq4xvexm-DYBvLyu0e33gmqwtIKNO1u8AnvfrVX35GuE0GQNnMPsMD8oyzhR9yCYw0Up0Lkvli1KUy0PgxOhc1bYC9AWii4_ttYERIrTqQ6UOwHdKV9dTdqZq3LhhukHVA6y_95FQJ6tz40mvIS_VzFMVTBLbP-vfWcaO5LsUtnffa8Ei67ihjQkaNjfhxnYG63z67PuuKFcZiUNxiUQUJuH-dvFaqUooqKBXZ8gtLeurQA60ZHjXhiMJvWNLXrdszPXtL6NFeUsyVTeQ4Q-fIWPo-5Gwa467Khlsp7iL0ezqO_6k4-L2LA-zOlLJXHNKUnSxHOO5I5bjAZU7lhmS2jk1VssY_1PUpfG_t4l9wTjVUs6rVSKx8wb04_CxnvvlJnWp1kxU" href="https://www.xafdeveloper.blogspot.com/?fbclid=IwAR1rlCRPe0X2339Ae8QFZ04LhH8VcG-kHg7JRGE5gQwVCUCV85Q0X7qBWUA" rel="noopener nofollow" style="color: #385898; cursor: pointer; font-family: inherit; text-decoration-line: none;" target="_blank">http://www.xafdeveloper.blogspot.com</a></div>
<div style="background-color: white; color: #1c1e21; font-family: inherit; margin-bottom: 6px; margin-top: 6px;">
then while making build you need to create build like this .</div>
<div style="background-color: white; color: #1c1e21; font-family: inherit; margin-bottom: 6px; margin-top: 6px;">
<br /></div>
<div style="background-color: white; color: #1c1e21; font-family: inherit; margin-bottom: 6px; margin-top: 6px;">
ng build --prod --base--href /xafdeveloper/</div>
<div style="background-color: white; color: #1c1e21; font-family: inherit; margin-bottom: 6px; margin-top: 6px;">
<br /></div>
<div style="background-color: white; color: #1c1e21; font-family: inherit; margin-bottom: 6px; margin-top: 6px;">
<b>Note2:</b> URL Rewrite extension need to install in IIS and you can download it from Microsoft site .</div>
<div style="background-color: white; color: #1c1e21; font-family: inherit; margin-bottom: 6px; margin-top: 6px;">
<br /></div>
<div style="background-color: white; color: #1c1e21; font-family: inherit; margin-bottom: 6px; margin-top: 6px;">
<b>Note3:</b> you need to add <b>web.config</b> file in your <b>vd </b>as by default angular build didn't create a "web.config" file .</div>
<div style="background-color: white; color: #1c1e21; font-family: inherit; margin-bottom: 6px; margin-top: 6px;">
<br /></div>
<div style="background-color: white; color: #1c1e21; font-family: inherit; margin-bottom: 6px; margin-top: 6px;">
you can create is by adding a text file and change its name and file type as config .</div>
<div style="background-color: white; color: #1c1e21; font-family: inherit; margin-bottom: 6px; margin-top: 6px;">
now copy<b> url rewrite</b> code from web and paste it in this file .</div>
<div style="background-color: white; font-family: inherit; margin-bottom: 6px; margin-top: 6px;">
<span style="color: #1c1e21;">Now access your app and </span><b><span style="color: #f1c232;">enjoy Angular Application Cheers !..</span></b></div>
<div style="background-color: white; color: #1c1e21; font-family: inherit; margin-bottom: 6px; margin-top: 6px;">
<b>Note3</b>. you can see base reference details in <b>Index.html</b> file also in your build folder</div>
<div style="background-color: white; color: #1c1e21; font-family: inherit; margin-bottom: 6px; margin-top: 6px;">
<br /></div>
<div style="background-color: white; color: #1c1e21; font-family: inherit; margin-bottom: 6px; margin-top: 6px;">
Follow on <a href="https://youtu.be/povG03z340E">Shubh Techno Expert</a></div>
<div style="background-color: white; color: #1c1e21; font-family: inherit; margin-bottom: 6px; margin-top: 6px;">
<br /></div>
<div style="background-color: white; color: #1c1e21; font-family: inherit; margin-bottom: 6px; margin-top: 6px;">
@ShubhTechnoExpet on Facebook page .</div>
<div style="background-color: white; color: #1c1e21; font-family: inherit; margin-bottom: 6px; margin-top: 6px;">
<br /></div>
<div style="background-color: white; color: #1c1e21; font-family: inherit; margin-bottom: 6px; margin-top: 6px;">
<br /></div>
<div style="background-color: white; color: #1c1e21; font-family: inherit; margin-bottom: 6px; margin-top: 6px;">
<br /></div>
</div>
</div>
Nagendrahttp://www.blogger.com/profile/05204068804623434613noreply@blogger.com2tag:blogger.com,1999:blog-7832612635792031484.post-88697951568412259722019-11-26T21:31:00.002+05:302019-11-26T21:31:26.338+05:30Excel Download Feature in Angular <div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: left;">
<br />For Excel Download feature in Angular these Modules are required . you need to install.</h2>
<br />
1. file-saver<br />
<br />
2. xlsx<br />
<br />
<span style="color: #351c75;"><b>npm install file-saver --save</b></span><br />
<br />
<span style="color: #351c75;"><b>npm install xlsx --save</b></span><br />
<br />
once you install these package then it will give some error and ask for fund but dont wory your package will be installed which is required for excel download .<br />
<br />
you need admin right to intall these packages.<br />
<br />
You Can Follow my Channel for VDO Shubh Techno Expert</div>
Nagendrahttp://www.blogger.com/profile/05204068804623434613noreply@blogger.com1tag:blogger.com,1999:blog-7832612635792031484.post-78360778876144173032019-11-24T20:56:00.001+05:302019-11-24T20:56:36.702+05:30Dropdown binding in Angular 6 by *ngFor<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<span style="white-space: pre;"> </span>Dropdown binding in Angular 6 by *<a href="https://youtu.be/XBApBt5AYKY" target="_blank">ngFor</a><br />
<br />
<span style="white-space: pre;"> </span><br />
<span style="white-space: pre;"> </span>Looping can be achieved by *ngFor directive<br />
<br />
<span style="white-space: pre;"> </span>Syntax *ngFor="let item of collection"<br />
<br />
<br />
<select id="slemp" (change)="GetEmp($event)"><br />
<br />
<option *ngFor="let item of Empcollection" value={{item.EmpCode}} ><br />
<br />
{{item.EmpName}}<br />
</option><br />
</select><br />
<div>
<br /></div>
<div>
Here one Dropdown is created and its value and text is shown in an alert box . we have created a GetEmp($event) method and passed event as an argument by which we will get the control value .</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
you can Follow <a href="https://youtu.be/XBApBt5AYKY" target="_blank">Shubh Techno Expert</a></div>
<div>
<br /></div>
<h2 style="text-align: left;">
<u>Salesperson.Component.Html</u></h2>
<div>
<div>
<div></div>
<div>
<h1 style="text-align: center;">Dropdown binding in Angular by *ngFor</h1></div>
<div>
<div align="center"></div>
<div>
<select (change)="myEmp($event)" ></div>
<div>
<option *ngFor ="let item of Empcollection" value={{item.EmpCode}}>{{item.EmpName}}</option></div>
<div>
</select></div>
<div>
<br /></div>
<div>
</div></div>
</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<h2>
<u>Salesperson.Component.ts</u></h2>
</div>
<div>
<div>
<br /></div>
<div>
import { Component, OnInit } from '@angular/core';</div>
<div>
<br /></div>
<div>
@Component({</div>
<div>
selector: 'app-salesperson',</div>
<div>
templateUrl: './salesperson.component.html',</div>
<div>
styleUrls: ['./salesperson.component.css']</div>
<div>
})</div>
<div>
export class SalespersonComponent implements OnInit {</div>
<div>
<br /></div>
<div>
constructor() { }</div>
<div>
<br /></div>
<div>
ngOnInit() {</div>
<div>
<br /></div>
<div>
}</div>
<div>
<br /></div>
<div>
</div>
<div>
Empcollection: any =</div>
<div>
[</div>
<div>
{ EmpCode: "E001",EmpName: "Nagendra", Email: "Nagendra@test.com", Salary: 8000 },</div>
<div>
{ EmpCode: "E002",EmpName: "Raj", Email: "raj@test.com", Salary: 70000 },</div>
<div>
{ EmpCode: "E003",EmpName: "Shubh", Email: "Nagendra@test.com", Salary: 80000 },</div>
<div>
{ EmpCode: "E004",EmpName: "Techno", Email: "Shubh@test.com", Salary: 9000 }</div>
<div>
</div>
<div>
]</div>
<div>
<br /></div>
<div>
myEmp(event)</div>
<div>
{</div>
<div>
alert("Emp Name Selected :" + event.target.value);</div>
<div>
}</div>
<div>
</div>
<div>
}</div>
<div>
<br /></div>
<div>
<a href="https://youtu.be/XBApBt5AYKY" target="_blank">You Can Subscribe my Channel for upcoming VDO related to Angular</a> <a href="https://youtu.be/XBApBt5AYKY" target="_blank">Shubh Techno Expert</a> </div>
<div style="text-decoration-line: underline;">
<br /></div>
</div>
</div>
Nagendrahttp://www.blogger.com/profile/05204068804623434613noreply@blogger.com1tag:blogger.com,1999:blog-7832612635792031484.post-62302469664565521562019-11-24T20:22:00.000+05:302019-11-24T20:26:42.203+05:30Looping in Angular by *ngFor<div dir="ltr" style="text-align: left;" trbidi="on">
Looping can be achieved by *<a href="https://youtu.be/3dYC1PTXmfI" target="_blank">ngFor</a> directive<br />
<br />
Syntax *ngFor="let item of collection"<br />
<br />
Here collection object may be your collection of any class or array<br />
item is the variable in which you will get each object which is available in your collection.<br />
<br />
<br />
you can Refer on my Channel<br />
<br />
<a href="https://youtu.be/3dYC1PTXmfI" target="_blank"> Shubh Techno Expert</a><br />
<br />
<a href="https://youtu.be/3dYC1PTXmfI" style="background: rgb(255, 255, 255); border: 0px; color: #167ac6; cursor: pointer; font-family: "YouTube Noto", Roboto, arial, sans-serif; font-size: 11px; margin: 0px; padding: 0px; text-decoration-line: none;" target="_blank">https://youtu.be/3dYC1PTXmfI</a><br />
<div>
<br /></div>
<div>
Here is Example .</div>
<div>
<br /></div>
<h2 style="text-align: left;">
<u>Salesperson.component.html </u></h2>
<h1 style="text-align: center;">Looping through *ngFor</h1><br />
<br />
<div><br />
<h1 align="center">Employee</h1><br />
<table border="2" align="center"><br />
<thead><br />
<th>Emp Name</th><br />
<th>Emp Code</th><br />
<th>Email</th><br />
<th>Salary</th><br />
</thead><br />
<tbody><br />
<tr *ngFor="let item of Empcollection"><br />
<td>{{item.EmpCode}}</td><br />
<td>{{item.EmpName}}</td><br />
<td>{{item.Email}}</td><br />
<td>{{item.Salary}}</td><br />
</tr><br />
</tbody><br />
<br />
</table><br />
<div style="text-decoration-line: underline;">
<br /></div>
<div style="text-decoration-line: underline;">
<h2>
<u>Salesperson.component.ts </u></h2>
</div>
<div>
<div>
import { Component, OnInit } from '@angular/core';</div>
<div>
<br /></div>
<div>
@Component({</div>
<div>
selector: 'app-salesperson',</div>
<div>
templateUrl: './salesperson.component.html',</div>
<div>
styleUrls: ['./salesperson.component.css']</div>
<div>
})</div>
<div>
export class SalespersonComponent implements OnInit {</div>
<div>
<br /></div>
<div>
constructor() { }</div>
<div>
<br /></div>
<div>
ngOnInit() {</div>
<div>
<br /></div>
<div>
}</div>
<div>
</div>
<div>
Empcollection: any =</div>
<div>
[</div>
<div>
{ EmpCode: "E001",EmpName: "Nagendra", Email: "Nagendra@test.com", Salary: 8000 },</div>
<div>
{ EmpCode: "E002",EmpName: "Raj", Email: "raj@test.com", Salary: 70000 },</div>
<div>
{ EmpCode: "E003",EmpName: "Shubh", Email: "Nagendra@test.com", Salary: 80000 },</div>
<div>
{ EmpCode: "E004",EmpName: "Techno", Email: "Shubh@test.com", Salary: 9000 }</div>
<div>
</div>
<div>
]</div>
<div>
</div>
<div>
}</div>
<div style="text-decoration-line: underline;">
<br /></div>
</div>
<div style="text-decoration-line: underline;">
<a href="https://youtu.be/iCczsazLY-E" target="_blank">You Can Subscribe my Channel for upcoming VDO related to Angular</a> <a href="https://youtu.be/iCczsazLY-E" target="_blank">Shubh Techno Expert</a></div>
</div>
Nagendrahttp://www.blogger.com/profile/05204068804623434613noreply@blogger.com0tag:blogger.com,1999:blog-7832612635792031484.post-81454376057073520482019-11-23T10:10:00.001+05:302019-11-23T10:10:16.490+05:30Usefull Command In Angular<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="color: #cc0000;">How to Create new Application in Angular</span><br />
<br />
ng new appname<br />
<br />
<span style="color: #ffd966;">How to Create New Component</span><br />
<br />
ng generate component componentname<br />
<br />
ng g c Component Name<br />
<br />
if you want to create component in a folder then specify folder name also<br />
<br />
ng g c emp/EmployeeDetails<br />
<br />
<br />
g -- generate and c -- component<br />
<br />
<span style="color: #e69138;">How to create New Class</span><br />
<br />
ng generate class classname<br />
<br />
<span style="color: #f1c232;">How to Create New Service </span><br />
<br />
ng g service servicename</div>
Nagendrahttp://www.blogger.com/profile/05204068804623434613noreply@blogger.com0tag:blogger.com,1999:blog-7832612635792031484.post-9009509251166150812019-11-19T10:03:00.001+05:302019-11-19T10:03:08.622+05:30Angular Build Minification and Uglification<div dir="ltr" style="text-align: left;" trbidi="on">
Minification and Uglyfication in Angular Deployement<br />
<br />
Minification : While building Angular Application white spaces , unused variable , unused token removal is called Minification and it reduced build size .<br />
<br />
<br />
uglyfication : While building Angular app variable name , function name class and other things name changes and compiled so after build in view source file you will not able to see the script , vairable class and other things . it also reduce files and insure security. its called Uglification .<br />
<br />
<br />
you can make build by<br />
<br />
ng build --dev For Development<br />
<br />
ng build --prod For Production Release<br />
<br />
after building you cann see the build package in dist Folder in your currwnt app.<br />
<br />
all bukld will will be in compressed and combined format.<br />
<br /></div>
Nagendrahttp://www.blogger.com/profile/05204068804623434613noreply@blogger.com1tag:blogger.com,1999:blog-7832612635792031484.post-84808101811772224462019-11-16T20:35:00.000+05:302019-11-16T20:35:02.964+05:30ngIf in Angular 6<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<br />
The *ngIf directive is most commonly used to conditionally show an inline template<br />
<br />
The ngIf directive can be very useful in scenarios where you want to show a part of your Angular application UI<br />
<br />
see my VDO on <a href="https://youtu.be/eirevolrNYI" target="_blank">Shubh Techno Expert</a><br />
<br />
<a href="https://youtu.be/eirevolrNYI" style="background: rgb(255, 255, 255); border: 0px; color: #167ac6; cursor: pointer; font-family: "YouTube Noto", Roboto, arial, sans-serif; font-size: 11px; margin: 0px; outline: 0px; padding: 0px;" target="_blank">https://youtu.be/eirevolrNYI</a><br />
<br />
<br />
<div ngif="condition">
Content to render when condition is true.</div>
<br />
<br />
<ng-template condition="" ngif=""><div>
Content to render when condition is</div>
</ng-template><br />
true.</div>
<br />
----------------------------------------------------------------------------<br />
<div ngif="true">
Content to render when condition is true.</div>
<br />
<br />
<br />
<div ngif="true; condition1 else condition2">
Content to render when condition is true.</div>
<br />
<br />
<br />
<ng-template condition1="">True Condition Executed</ng-template><br />
<br />
<ng-template condition2="">False Condition Executed</ng-template><br />
<br />
<br />
<br />
<br />
-----------------------------------------------------------------------------<br />
<br />
<div ngif="condition; then thenBlock else elseBlock">
</div>
<br />
<ng-template thenblock="">Content to render when condition is true.</ng-template><br />
<ng-template elseblock="">Content to render when condition is false.</ng-template><br />
<br />
<br />
------------------------------------------------------------------------------<br />
<br />
<div ngif="condition as value; else elseBlock">
{{value}}</div>
<br />
<ng-template elseblock="">Content to render when value is null.</ng-template><br />
<br />
<br />
<h2 style="text-align: left;">
<b>Customer.component.html</b></h2>
import { Component, OnInit } from '@angular/core';<br />
<br />
@Component({<br />
selector: 'app-customer',<br />
templateUrl: './customer.component.html',<br />
styleUrls: ['./customer.component.css']<br />
})<br />
export class CustomerComponent implements OnInit {<br />
<br />
constructor() { }<br />
<br />
ngOnInit() {<br />
}<br />
<br />
flag: boolean = false; <br />
<br />
empcollection: any = [<br />
{name: "Raj", email:"Raj@gmail.com" ,Salary:2000},<br />
{name: "Sumit", email:"sumit@gmail.com",Salary:70000},<br />
{name: "Nagendra", email:"Nagendra@Gmail.com",Salary:8000},<br />
{name: "Manish", email:"Manish@Gmail.com",Salary:9000}<br />
]<br />
<br />
}<br />
<div>
<br /></div>
<h2 style="text-align: left;">
<b>customer.components.ts</b></h2>
<div>
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">h1</span> <span style="color: #f44747;">align</span>=<span style="color: #ce9178;">"center"</span><span style="color: grey;">></span>how to use ngIf<span style="color: grey;"><</span><span style="color: #569cd6;">h2</span><span style="color: grey;">></span></div>
<br /><br /><div>
<span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">h1</span><span style="color: grey;">></span>Employee<span style="color: grey;"></</span><span style="color: #569cd6;">h1</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">table</span> <span style="color: #f44747;">border</span>=<span style="color: #ce9178;">"2"</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">thead</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">th</span><span style="color: grey;">></span>Name<span style="color: grey;"></</span><span style="color: #569cd6;">th</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">th</span><span style="color: grey;">></span>Email<span style="color: grey;"></</span><span style="color: #569cd6;">th</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">th</span> <span style="color: #9cdcfe;">*ngIf</span>=<span style="color: #ce9178;">"flag"</span><span style="color: grey;">></span>Salary<span style="color: grey;"></</span><span style="color: #569cd6;">th</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">th</span> <span style="color: #9cdcfe;">*ngIf</span>=<span style="color: #ce9178;">"flag"</span><span style="color: grey;">></span>Actions<span style="color: grey;"></</span><span style="color: #569cd6;">th</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">thead</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">tbody</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">tr</span> <span style="color: #9cdcfe;">*ngFor</span>=<span style="color: #ce9178;">"let e of empcollection"</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
{{e.name}}</div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
{{e.email}}</div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">td</span> <span style="color: #9cdcfe;">*ngIf</span>=<span style="color: #ce9178;">"flag"</span><span style="color: grey;">></span></div>
<div>
{{e.Salary}}</div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">td</span> <span style="color: #9cdcfe;">*ngIf</span>=<span style="color: #ce9178;">"flag"</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span>Delete<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span>Update<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">tbody</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">table</span><span style="color: grey;">></span></div>
<br /><div>
<span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<br /><div>
<span style="color: grey;"><</span><span style="color: #569cd6;">table</span> <span style="color: #f44747;">border</span>=<span style="color: #ce9178;">"3"</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">th</span><span style="color: grey;">></span>Name<span style="color: grey;"></</span><span style="color: #569cd6;">th</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">th</span><span style="color: grey;">></span>Age<span style="color: grey;"></</span><span style="color: #569cd6;">th</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">tr</span> <span style="color: #9cdcfe;">*ngIf</span>=<span style="color: #ce9178;">"false"</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span>Amit<span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span>12<span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span>Rohit<span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span>34<span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">tr</span> <span style="color: #9cdcfe;">*ngIf</span>=<span style="color: #ce9178;">"true"</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span>Deepak<span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span>23<span style="color: grey;"></</span><span style="color: #569cd6;">td</span><span style="color: grey;">></span></div>
<br /><div>
<span style="color: grey;"></</span><span style="color: #569cd6;">tr</span><span style="color: grey;">></span></div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">table</span><span style="color: grey;">></span></div>
<div>
</div>
<div>
</div>
<br /><div>
<span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">*ngIf</span>=<span style="color: #ce9178;">"true; else loggedOut"</span><span style="color: grey;">></span></div>
<div>
Welcome friend.</div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
</div>
<div>
<span style="color: grey;"><</span><span style="color: #569cd6;">ng-template</span> <span style="color: #9cdcfe;">#loggedOut</span><span style="color: grey;">></span></div>
<div>
Please friend, login.</div>
<div>
<span style="color: grey;"></</span><span style="color: #569cd6;">ng-template</span><span style="color: grey;">></span></div>
</div>
</div>
<div>
<br /></div>
<div>
<br /></div>
<br />
<br />
<br />
<br />Nagendrahttp://www.blogger.com/profile/05204068804623434613noreply@blogger.com0tag:blogger.com,1999:blog-7832612635792031484.post-6512013387757838362019-11-16T20:24:00.000+05:302019-11-16T20:24:42.902+05:30Event Binding in Angular 6 <div dir="ltr" style="text-align: left;" trbidi="on">
<br />
we have taken a component to Show <b>Event Binding</b> .<br />
<br />
See My VDO on <a href="https://youtu.be/2LDYq7uKhzE" target="_blank">Shubh Techno Expert</a><br />
<br />
https://youtu.be/2LDYq7uKhzE<br />
<h2 style="text-align: left;">
sidebar.component.html</h2>
<br />
<div>
</div>
<br />
<br />
<h1>
Interpollation</h1>
<br />
<br />
<form ngsubmit="" onclicksubmit="" userlogin1.value="" userlogin1="ngForm">
</form>
<br />
<br />
<table border="2" padding="2" style="width: 100%px;"></table>
<br />
<tr></tr>
<br />
<td>Email ID</td><br />
<td></td><br />
<td><input name="emailid" ngmodel="" placeholder="Enter Email" type="text" width="100%" /></td><br />
</div>
<tr></tr>
<br />
<td>password</td><br />
<td></td><br />
<td> <input name="passwd" ngmodel="" placeholder="passwd" type="password" width="100%" /></td><br />
<br />
<br />
<tr></tr>
<br />
<td> </td><br />
<td></td><br />
<td> <input type="submit" value="submit" /></td><br />
<br />
<br />
<tr></tr>
<br />
<td>My Mail ID is :</td><br />
<td></td><br />
<td> <input id="btnintervolation" type="button" value="{{userlogin1.value.emailid}}" /></td><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h2 style="text-align: left;">
<b>sidebar.component.ts</b></h2>
<br />
import { Component, OnInit } from '@angular/core';<br />
<br />
<br />
@Component({<br />
selector: 'app-sidebar',<br />
templateUrl: './sidebar.component.html',<br />
styleUrls: ['./sidebar.component.css']<br />
})<br />
export class SidebarComponent {<br />
<br />
myEmail:any;<br />
constructor() { }<br />
<br />
ngOnInit() { }<br />
<br />
onClickSubmit(data) {<br />
debugger<br />
this.myEmail = data.emailid;<br />
alert("Entered Email id : " + data.emailid +" " + data.passwd);<br />
}<br />
<br />
btnClicked()<br />
{<br />
console.log('i am clicked from HTML Page');<br />
}<br />
<br />
btnClickedwithParamter(evnt)<br />
{<br />
console.log('Button is clicked which Will return Click Event value') ;<br />
console.log(evnt) ;<br />
}<br />
<br />
}<br />
<div>
<br /></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />Nagendrahttp://www.blogger.com/profile/05204068804623434613noreply@blogger.com0tag:blogger.com,1999:blog-7832612635792031484.post-11856993363182516482019-11-16T19:59:00.002+05:302019-11-16T19:59:17.551+05:30Interpolation in Angular 6<div dir="ltr" style="text-align: left;" trbidi="on">
Interpolation is a technique that allow the user to bind a value to a UI element . two curly braces are used for this {{}} . It is called a Template Expression<br />
<br />
<h4 style="text-align: left;">
See my VDO on <b><span style="color: #cc0000;"><a href="https://youtu.be/NQpmnOLM_Ms" target="_blank">Shubh Techno Expert</a> </span></b>Channel </h4>
<div>
<a href="https://youtu.be/NQpmnOLM_Ms" style="background: rgb(255, 255, 255); border: 0px; color: #167ac6; cursor: pointer; font-family: "YouTube Noto", Roboto, arial, sans-serif; font-size: 11px; margin: 0px; padding: 0px;" target="_blank">https://youtu.be/NQpmnOLM_Ms</a></div>
<h2 style="text-align: left;">
<b>app.component.html</b></h2>
<br />
<div>
</div>
<br />
<br />
<h1>
Interpollation</h1>
<br />
<br />
<form ngsubmit="" onclicksubmit="" userlogin1.value="" userlogin1="ngForm">
</form>
<br />
<br />
<table border="2" padding="2" style="width: 100%px;"></table>
<br />
<tr></tr>
<br />
<td>Email ID</td><br />
<td></td><br />
<td><input name="emailid" nbsp="" p="" placeholder="Enter Email" type="text" /> ngModel width="100%"></td><br />
</div>
<tr></tr>
<br />
<td>password</td><br />
<td></td><br />
<td> <input name="passwd" nbsp="" p="" placeholder="passwd" type="password" /> ngModel width="100%"></td><br />
<br />
<br />
<tr></tr>
<br />
<td> </td><br />
<td></td><br />
<td> <input type="submit" value="submit" /></td><br />
<br />
<br />
<tr></tr>
<br />
<td>My Mail ID is :</td><br />
<td></td><br />
<td> <input id="btnintervolation" nbsp="" p="" type="button" /> value="{{userlogin1.value.emailid}}"></td><br />
<br />
<br />
<br />
<br />
<br />
<br />
{{userlogin1.value.emailid}}<br />
This is incremented Value : {{1+ 1}}<br />
<br />
Sum of :<br />
<br />
<br />
<h1>
sum of : {{10 + 20 + 30}}</h1>
<br />
<h2>
{{userlogin1.value.emailid}}</h2>
<br />
<h3>
{{'This is My Email id ' + userlogin1.value.emailid}}</h3>
<br />
<div>
<br /></div>
<div>
<br /></div>
<h2 style="text-align: left;">
<b>app.component.ts</b></h2>
<div>
<div>
<b>import { Component, OnInit } from '@angular/core';</b></div>
<div>
<b><br /></b></div>
<div>
<b><br /></b></div>
<div>
<b>@Component({</b></div>
<div>
<b> selector: '</b><span style="background-color: #1e1e1e; color: #ce9178; font-family: Consolas, "Courier New", monospace; font-size: 14px; white-space: pre;">app-root</span><b>',</b></div>
<div>
<b> templateUrl: './</b><span style="background-color: #1e1e1e; color: #ce9178; font-family: Consolas, "Courier New", monospace; font-size: 14px; white-space: pre;">app.component.html</span><b>',</b></div>
<div>
<b> styleUrls: ['./</b><span style="background-color: #1e1e1e; color: #ce9178; font-family: Consolas, "Courier New", monospace; font-size: 14px; white-space: pre;">app.component</span><b>.css']</b></div>
<div>
<b>})</b></div>
<div>
<b>export class appComponent {</b></div>
<div>
<b><br /></b></div>
<div>
<b> myEmail:any;</b></div>
<div>
<b> constructor() { }</b></div>
<div>
<b><br /></b></div>
<div>
<b> ngOnInit() { }</b></div>
<div>
<b><br /></b></div>
<div>
<b> onClickSubmit(data) {</b></div>
<div>
<b> debugger</b></div>
<div>
<b> this.myEmail = data.emailid;</b></div>
<div>
<b> alert("Entered Email id : " + data.emailid +" " + data.passwd);</b></div>
<div>
<b> }</b></div>
<div>
<br /></div>
<div>
<b> </b></div>
<div>
<b>}</b></div>
<div style="font-weight: bold;">
<br /></div>
</div>
Nagendrahttp://www.blogger.com/profile/05204068804623434613noreply@blogger.com0tag:blogger.com,1999:blog-7832612635792031484.post-73014369428042037402019-11-15T12:25:00.002+05:302019-11-15T12:28:12.169+05:30Angular 6 Routing<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
Routing in Angular<br />
<br />
<br />
<a href="https://www.youtube.com/watch?v=-Rtf6G7u4-4&t=1s">https://www.youtube.com/watch?v=-Rtf6G7u4-4&t=1s</a><br />
<br />
<br />
Today i will tell you how to Create Link in Angular .<br />
<br />
to Create a link you need a app-routing.module.ts<br />
in this module we define link /routes .<br />
<br />
<br />
Frist we will Create Some Link on our Home Page Component<br />
<br />
app.component.html<br />
<br />
<div>
</div>
<br />
<table border="2"></table>
<br />
<br />
<br />
<a href="https://draft.blogger.com/null" routerlink="/"> Home </a> <br />
<br />
<br />
<a href="https://draft.blogger.com/null" routerlink="/emp"> Employee </a> <br />
<br />
<br />
<br />
<div>
</div>
<br />
<br />
<router-outlet> </router-outlet><br />
<br />
The <router-outlet> tells the router where to display routed views.</router-outlet><br />
<br />
Now our HTML page in created in which two link will be there<br />
on clicking these link you will be redirected on another page .<br />
this is done through routing .<br />
<br />
Routing outlet is used for routing .<br />
<br />
<br />
we have create component<br />
<br />
C:\MyAngular\myapp> ng g c home<br />
CREATE src/app/home/home.component.html (19 bytes)<br />
CREATE src/app/home/home.component.spec.ts (614 bytes)<br />
CREATE src/app/home/home.component.ts (261 bytes)<br />
CREATE src/app/home/home.component.css (0 bytes)<br />
UPDATE src/app/app.module.ts (553 bytes)<br />
<br />
C:\MyAngular\myapp> ng g c emp<br />
CREATE src/app/emp/emp.component.html (18 bytes)<br />
CREATE src/app/emp/emp.component.spec.ts (607 bytes)<br />
CREATE src/app/emp/emp.component.ts (257 bytes)<br />
CREATE src/app/emp/emp.component.css (0 bytes)<br />
UPDATE src/app/app.module.ts (623 bytes)<br />
<br />
see in both case app.module.ts is updated .<br />
<br />
in app.module.ts routing module is already added in import section<br />
<br />
by default import { AppRoutingModule } from './app-routing.module'; is added in app.module.ts<br />
<br />
<br />
app-routing.module.ts<br />
--------------------------------<br />
<br />
const routes: Routes = [<br />
{ path:'',component : HomeComponent } ,<br />
{ path:'employee',component : EmplistComponent }<br />
<br />
];<br />
path: a string that matches the URL in the browser address bar.<br />
component: the component that the router should create when navigating to this route.<br />
<br />
---------------------------------<br />
<div>
<br /></div>
</div>
Nagendrahttp://www.blogger.com/profile/05204068804623434613noreply@blogger.com1tag:blogger.com,1999:blog-7832612635792031484.post-79488120241500329932019-11-15T12:24:00.000+05:302019-11-24T20:09:52.970+05:30Angular 6 Project Structure<div dir="ltr" style="text-align: left;" trbidi="on">
Learn the Project Structure of Angular 6<br />
<br />
<a href="https://youtu.be/iCczsazLY-E" target="_blank">Shubh Techno Expert</a><br />
<br />
<a href="https://www.youtube.com/watch?v=povG03z340E">https://www.youtube.com/watch?v=povG03z340E</a><br />
<br />
you will able to understand the Project Structure .<br />
<br />
<br />
<div class="MsoNormal">
Project Architecture<o:p></o:p></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGaUoZNWpxojat2uN40uMkOS_ATn6PoU26TG5vl9l7chypujlKf76qnLU6-Q-7s8i3Dh22GKCWm5mJc0o0338ydV5UmQiBP0A9uaiglJLp6_lNQN7X7n09pFgm0BmBfkSU1OZTU9Lti-4/s1600/Project+Structure+Angular.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="689" data-original-width="402" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGaUoZNWpxojat2uN40uMkOS_ATn6PoU26TG5vl9l7chypujlKf76qnLU6-Q-7s8i3Dh22GKCWm5mJc0o0338ydV5UmQiBP0A9uaiglJLp6_lNQN7X7n09pFgm0BmBfkSU1OZTU9Lti-4/s400/Project+Structure+Angular.png" width="232" /></a></div>
<div class="MsoNormal">
<b>app-routing.module.ts
<o:p></o:p></b></div>
<div class="MsoNormal">
This Module is used to define Routing <o:p></o:p></div>
<div class="MsoNormal">
<b>app.component.html<o:p></o:p></b></div>
<div class="MsoNormal">
This HTML file is used for UI and HTML designing <o:p></o:p></div>
<div class="MsoNormal">
<b>app.component.spec.ts<o:p></o:p></b></div>
<div class="MsoNormal">
This file is used for Unit Testing .<o:p></o:p></div>
<div class="MsoNormal">
<b>app.component.ts<o:p></o:p></b></div>
<div class="MsoNormal">
This is typescript File where you can write your script .<o:p></o:p></div>
<div class="MsoNormal">
<b>app.module.ts<o:p></o:p></b></div>
<div class="MsoNormal">
This is the Module where you can import and define modules.<o:p></o:p></div>
<div class="MsoNormal">
<b>Index.html<o:p></o:p></b></div>
<div class="MsoNormal">
This is the Startup file <o:p></o:p></div>
<div class="MsoNormal">
<b>angular.json<o:p></o:p></b></div>
<div class="MsoNormal">
Here you can set your Botstrap css file and script files<o:p></o:p></div>
<div class="MsoNormal">
<b>Src Folder<o:p></o:p></b></div>
<div class="MsoNormal">
<b><span style="mso-spacerun: yes;"> </span>This Folder
Contains all your Files<o:p></o:p></b></div>
<div class="MsoNormal">
<b>.editorconfig<o:p></o:p></b></div>
<div class="MsoNormal">
This is the Configration File of Project<o:p></o:p></div>
<br /></div>
Nagendrahttp://www.blogger.com/profile/05204068804623434613noreply@blogger.com0tag:blogger.com,1999:blog-7832612635792031484.post-76146943303084197602019-11-15T12:19:00.002+05:302019-11-24T20:06:36.496+05:30Angular 6 Tutorials<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="background-color: white; font-family: "lato" , sans-serif; font-size: 16px;"><b>Angular is a JavaScript open-source front-end web application framework. </b></span><br />
<span style="background-color: white; color: #818181; font-family: "lato" , sans-serif; font-size: 16px;"><br /></span>
<span style="font-family: "lato" , sans-serif;"><span style="background-color: white;">Learn and Start Angular 6 </span></span><br />
<span style="font-family: "lato" , sans-serif;"><span style="background-color: white;"><br /></span></span>
<br />
<a href="https://www.youtube.com/watch?v=iCczsazLY-E&t=45s">https://youtu.be/iCczsazLY-E</a><br />
<div>
<br />
<div class="MsoNormal">
<span style="color: #333333; font-family: "roboto" , "helvetica neue light" , "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif;">Prerequisites</span></div>
<div>
</div>
<span style="font-family: "lato" , sans-serif;"><span style="background-color: white;"></span></span><br />
<h3 id="nodejs" style="clear: both; color: #333333; font-family: Roboto, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 400; margin: 24px 0px 12px;">
<span style="font-size: small;">1. Node.js</span></h3>
<div>
<span style="font-size: small;">2. </span><span style="color: #333333; font-family: "roboto" , "helvetica neue light" , "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif;">npm package manager</span></div>
<div>
<span style="color: #333333; font-family: "roboto" , "helvetica neue light" , "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif;"><br /></span></div>
<div>
<span style="color: #333333; font-family: "roboto" , "helvetica neue light" , "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif;">3.</span><span style="color: #333333; font-family: "roboto" , "helvetica neue light" , "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif;">Install the Angular CLI</span></div>
<div>
<span style="color: #333333; font-family: "roboto" , "helvetica neue light" , "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif;"><br /></span></div>
<div>
<span style="color: #333333; font-family: "roboto" , "helvetica neue light" , "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif;">open command Prompt and Install </span></div>
<div>
<span style="color: #333333; font-family: "roboto" , "helvetica neue light" , "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif;"><br /></span></div>
<div>
<span style="color: #333333; font-family: "roboto" , "helvetica neue light" , "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif;">c: \ > npm install -g @angular/cli</span></div>
<div>
<span style="color: #333333; font-family: "roboto" , "helvetica neue light" , "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif;"><br /></span></div>
<div>
<span style="color: #333333; font-family: "roboto" , "helvetica neue light" , "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif;"><br /></span></div>
<div>
<span style="color: #333333; font-family: "roboto" , "helvetica neue light" , "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif;"><br /></span></div>
</div>
</div>
Nagendrahttp://www.blogger.com/profile/05204068804623434613noreply@blogger.com4tag:blogger.com,1999:blog-7832612635792031484.post-51661773776178009252011-03-15T17:20:00.000+05:302011-03-15T17:20:46.508+05:30Add Enum in Array List<div dir="ltr" style="text-align: left;" trbidi="on"><br />
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;"><span style="color: blue; font-family: "Courier New"; font-size: 10.0pt; mso-no-proof: yes;">System.Collections.ArrayList</span><span style="color: #333333; font-family: "Arial","sans-serif"; font-size: 10.5pt; mso-fareast-font-family: "Times New Roman";"> Al = new </span><span style="color: blue; font-family: "Courier New"; font-size: 10.0pt; mso-no-proof: yes;">System.Collections.ArrayList();</span><span style="color: #333333; font-family: "Arial","sans-serif"; font-size: 10.5pt; mso-fareast-font-family: "Times New Roman";"> <br />
<br />
</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;"><span style="color: #333333; font-family: "Arial","sans-serif"; font-size: 10.5pt; mso-fareast-font-family: "Times New Roman";">Al.AddRange(Enum.GetNames(typeof(SqlDbType)));<o:p></o:p></span></div></div>Nagendrahttp://www.blogger.com/profile/05204068804623434613noreply@blogger.com0tag:blogger.com,1999:blog-7832612635792031484.post-55065204002919477562011-03-15T16:35:00.001+05:302019-11-21T09:37:29.594+05:30Save data Through XML<div dir="ltr" style="text-align: left;" trbidi="on"><br />
</div>Nagendrahttp://www.blogger.com/profile/05204068804623434613noreply@blogger.com0tag:blogger.com,1999:blog-7832612635792031484.post-56783099367883072772011-03-15T10:51:00.001+05:302011-03-15T13:04:08.799+05:30PAN No Validation<div dir="ltr" style="text-align: left;" trbidi="on"><br />
<br />
I have validated a text box that only PAN NO should be enter in that text box<br />
It should be of 10 character first 5 digit will be Alphabet next 4 digit will be number and next one is alphabet<br />
here txtPAN(TextBox) length should be fixed 10 chracter<br />
ex : BJJPA4563A<br />
<br />
private void txtPAN_KeyPress(object sender, KeyPressEventArgs e)<br />
{<br />
ValidatePANNO(e);<br />
}<br />
<div><br />
</div><br />
<br />
void ValidatePANNO(KeyPressEventArgs e)<br />
{<br />
if (!char.IsLetterOrDigit(e.KeyChar) && e.KeyChar != 8)<br />
{<br />
e.Handled = true;<br />
return;<br />
}<br />
<br />
if (e.KeyChar == 8)<br />
{<br />
return;<br />
}<br />
int len = txtPAN.TextLength;<br />
if (len < 5)<br />
{<br />
if (char.IsLetter(e.KeyChar))<br />
{<br />
<br />
}<br />
else<br />
{<br />
e.Handled = true;<br />
}<br />
<br />
}<br />
else<br />
{<br />
if (len == 9)<br />
{<br />
if (char.IsLetter(e.KeyChar))<br />
{<br />
return;<br />
}<br />
}<br />
if (char.IsLetter(e.KeyChar))<br />
{<br />
e.Handled = true;<br />
}<br />
else<br />
{<br />
if (len == 9)<br />
{<br />
if (!char.IsLetter(e.KeyChar))<br />
{<br />
e.Handled = true;<br />
}<br />
}<br />
}<br />
}<br />
}<br />
<div><br />
</div></div>Nagendrahttp://www.blogger.com/profile/05204068804623434613noreply@blogger.com1tag:blogger.com,1999:blog-7832612635792031484.post-47455719007966711802011-03-12T12:32:00.001+05:302011-03-14T15:01:19.457+05:30How To delete Collection From Context in Entity Framework 4.0<div dir="ltr" style="text-align: left;" trbidi="on"><br />
To Delete All Object by using Entity Framework 4.0<br />
<br />
To Delete All OrderDetails of Customer Object where OrderID=103<br />
<br />
var x = customerContext.OrderDetails.Where(c => c.OrderID == 103);<br />
customerContext.DeleteAll<orderdetails>(x.ToList());</orderdetails><br />
customerContext.SaveChanges();<br />
<br />
you have to defile DeleteAll method in a static class<br />
<br />
namespace Application.Global<br />
{<br />
<br />
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-font-family: Consolas;">public</span><span style="font-family: Consolas; font-size: 9.5pt; mso-bidi-font-family: Consolas;"> <span style="color: blue;">static</span> <span style="color: blue;">class</span> <span style="color: #2b91af;">GlobalMethods</span><o:p></o:p></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"><span style="font-family: Consolas; font-size: 9.5pt; mso-bidi-font-family: Consolas;"><span style="mso-spacerun: yes;"> </span>{<o:p></o:p></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"><span style="font-family: Consolas; font-size: 9.5pt; mso-bidi-font-family: Consolas;"><span style="mso-spacerun: yes;"> </span><span style="mso-spacerun: yes;"> </span><span style="color: blue;">public</span> <span style="color: blue;">static</span> <span style="color: blue;">void</span> DeleteAll<t>(<span style="color: blue;">this</span> <span style="color: #2b91af;">ObjectContext</span> context, <span style="color: #2b91af;">IEnumerable</span><t> records)<o:p></o:p></t></t></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"><span style="font-family: Consolas; font-size: 9.5pt; mso-bidi-font-family: Consolas;"><span style="mso-spacerun: yes;"> </span>{<o:p></o:p></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"><span style="font-family: Consolas; font-size: 9.5pt; mso-bidi-font-family: Consolas;"><span style="mso-spacerun: yes;"> </span><span style="color: blue;">foreach</span> (T record <span style="color: blue;">in</span> records)<o:p></o:p></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"><span style="font-family: Consolas; font-size: 9.5pt; mso-bidi-font-family: Consolas;"><span style="mso-spacerun: yes;"> </span>{<o:p></o:p></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"><span style="font-family: Consolas; font-size: 9.5pt; mso-bidi-font-family: Consolas;"><span style="mso-spacerun: yes;"> </span>context.DeleteObject(record);<o:p></o:p></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"><span style="font-family: Consolas; font-size: 9.5pt; mso-bidi-font-family: Consolas;"><span style="mso-spacerun: yes;"> </span>}<o:p></o:p></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"><span style="font-family: Consolas; font-size: 9.5pt; mso-bidi-font-family: Consolas;"><span style="mso-spacerun: yes;"> </span>}<o:p></o:p></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"><span style="font-family: Consolas; font-size: 9.5pt; mso-bidi-font-family: Consolas;"><span style="mso-spacerun: yes;"> </span>}<o:p></o:p></span></div><br />
}<br />
<br />
<br />
<br />
</div>Nagendrahttp://www.blogger.com/profile/05204068804623434613noreply@blogger.com0tag:blogger.com,1999:blog-7832612635792031484.post-11399596314423164312011-01-05T15:19:00.000+05:302011-01-05T15:19:03.044+05:30Restrict Special symbol in TextBox in C# private void ctlUL_KeyPress(object sender, KeyPressEventArgs e)<br />
{<br />
try<br />
{<br />
if (!char.IsLetterOrDigit(e.KeyChar) && e.KeyChar!=8 )<br />
{<br />
e.Handled = true;<br />
return;<br />
}<br />
}Nagendrahttp://www.blogger.com/profile/05204068804623434613noreply@blogger.com0tag:blogger.com,1999:blog-7832612635792031484.post-67420244659570612162010-12-06T11:46:00.000+05:302010-12-06T11:46:36.794+05:30DateTimePicker Format in C#Here are Some Different Types of Format of DateTimePicker<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8GYGmWjLiPwyZrsp4HsCTVggcKGUFCMULoaocPARX2d4L4gN7psHOie9_OIWM_Damdn_sU14oK_nEtmh-wLHzbDw2xFaygPc-tjmGSmeD7mAz7mYIOCStTLXvLv3GT0_oaX0Y5aO91o4/s1600/DatePicker.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="197" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8GYGmWjLiPwyZrsp4HsCTVggcKGUFCMULoaocPARX2d4L4gN7psHOie9_OIWM_Damdn_sU14oK_nEtmh-wLHzbDw2xFaygPc-tjmGSmeD7mAz7mYIOCStTLXvLv3GT0_oaX0Y5aO91o4/s320/DatePicker.JPG" width="320" /></a></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<!--[if gte mso 9]><xml> <w:WordDocument> <w:View>Normal</w:View> <w:Zoom>0</w:Zoom> <w:PunctuationKerning/> <w:ValidateAgainstSchemas/> <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid> <w:IgnoreMixedContent>false</w:IgnoreMixedContent> <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText> <w:Compatibility> <w:BreakWrappedTables/> <w:SnapToGridInCell/> <w:WrapTextWithPunct/> <w:UseAsianBreakRules/> <w:DontGrowAutofit/> </w:Compatibility> <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel> </w:WordDocument> </xml><![endif]--><!--[if gte mso 9]><xml> <w:LatentStyles DefLockedState="false" LatentStyleCount="156"> </w:LatentStyles> </xml><![endif]--><!--[if gte mso 10]> <style>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:"";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin:0in;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:"Times New Roman";
mso-ansi-language:#0400;
mso-fareast-language:#0400;
mso-bidi-language:#0400;}
</style> <![endif]--> <br />
<div class="MsoNormal"><span style="font-size: small;"><code><span style="color: black;">dateTimePicker2.Format = System.Windows.Forms.DateTimePickerFormat.Short;</span></code></span></div><div class="MsoNormal"><br />
</div><div class="MsoNormal"><span style="font-size: small;"><code><span style="color: black;">dateTimePicker3.Format = System.Windows.Forms.DateTimePickerFormat.Time;</span></code></span></div><div class="MsoNormal"><br />
</div><div class="MsoNormal"><span style="font-size: small;"><code><span style="color: black;">dateTimePicker4.CustomFormat = </span></code><code><span style="color: #2a00ff;">"yyyy-mm-dd"</span></code><code><span style="color: black;">;</span></code><span style="font-family: "Courier New";"><br />
<br />
</span></span></div><div class="MsoNormal"><span style="font-size: small;"><code><span style="color: black;">dateTimePicker4.Format = System.Windows.Forms.DateTimePickerFormat.Custom;</span></code></span></div>Nagendrahttp://www.blogger.com/profile/05204068804623434613noreply@blogger.com0tag:blogger.com,1999:blog-7832612635792031484.post-19119094419196145872010-12-04T16:33:00.002+05:302010-12-04T17:36:59.091+05:30Select Record between Months in SQLselect <b>ID, Name, Month</b> from (<br />
select ID, Name, Month, <br />
case Month <br />
when 'January' then 1<br />
when 'February' then 2<br />
when 'March' then 3<br />
when 'April' then 4<br />
when 'May' then 5<br />
when 'June' then 6<br />
when 'July' then 7<br />
when 'August' then 8<br />
when 'September' then 9<br />
when 'October' then 10<br />
when 'November' then 11<br />
when 'December' then 12<br />
<br />
end as MonthNo<br />
from <br />
<b>Emp</b><br />
) as TempTable<br />
where<br />
MonthNo between 1 and 12 order by [Month]Nagendrahttp://www.blogger.com/profile/05204068804623434613noreply@blogger.com0tag:blogger.com,1999:blog-7832612635792031484.post-74762655446061469132010-12-01T16:09:00.002+05:302010-12-01T16:09:28.455+05:30Convert String In Title Case C#<!--[if gte mso 9]><xml> <w:WordDocument> <w:View>Normal</w:View> <w:Zoom>0</w:Zoom> <w:PunctuationKerning/> <w:ValidateAgainstSchemas/> <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid> <w:IgnoreMixedContent>false</w:IgnoreMixedContent> <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText> <w:Compatibility> <w:BreakWrappedTables/> <w:SnapToGridInCell/> <w:WrapTextWithPunct/> <w:UseAsianBreakRules/> <w:DontGrowAutofit/> </w:Compatibility> <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel> </w:WordDocument> </xml><![endif]--><!--[if gte mso 9]><xml> <w:LatentStyles DefLockedState="false" LatentStyleCount="156"> </w:LatentStyles> </xml><![endif]--><!--[if gte mso 10]> <style>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:"";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin:0in;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:"Times New Roman";
mso-ansi-language:#0400;
mso-fareast-language:#0400;
mso-bidi-language:#0400;}
</style> <![endif]--> <br />
<div class="MsoNormal" style="margin: 1.5pt 0in 3pt -5.25pt; text-indent: 5.25pt;"><span style="font-size: small;"><span style="font-family: "Courier New";">string s = "This is a test";</span></span></div><div class="MsoNormal" style="margin: 1.5pt 0in 3pt -5.25pt; text-indent: 5.25pt;"><span style="font-size: small;"><span style="font-family: "Courier New";">s = System.Globalization.CultureInfo.CurrentCulture.TextInfo.ToTitleCase(s.ToLower())</span></span></div>Nagendrahttp://www.blogger.com/profile/05204068804623434613noreply@blogger.com0tag:blogger.com,1999:blog-7832612635792031484.post-36449237598976348122010-12-01T15:49:00.001+05:302010-12-01T16:06:39.410+05:30Convert ArrayList to String<div class="MsoNormal" style="margin: 1.5pt 0in 3pt -5.25pt;"><span style="font-size: small;"><span style="font-family: "Courier New";">ArrayList ar =new ArrayList();</span></span></div><div class="MsoNormal" style="margin: 1.5pt 0in 3pt -5.25pt;"><span style="font-size: small;"><span style="font-family: "Courier New";">string str=string.Empty;</span></span></div><div class="MsoNormal" style="margin: 1.5pt 0in 3pt -5.25pt;"><span style="font-size: small;"><span style="font-family: "Courier New";">str = String.Join(',', (string []) ar.ToArray(typeof(string)))</span></span></div><div class="MsoNormal" style="margin: 1.5pt 0in 3pt -5.25pt;"><br />
</div><div class="MsoNormal" style="margin: 1.5pt 0in 3pt -5.25pt;"><br />
</div>Nagendrahttp://www.blogger.com/profile/05204068804623434613noreply@blogger.com0