Posts

C# for beginners

C# - for beginners - Speaking C# , ANGULAR WITH CORE .NET AND MVC RAZOR ENGINE This chapter is all about the basics of the C# programming language. Over the course of this chapter, you'll learn how to write statements using the grammar of C#, as well as being introduced to some of the common vocabularies that you will use every day. In addition to this, by the end of the chapter, you'll feel confident in knowing how to temporarily store and work with information in your computer's memory. This chapter covers the following topics: • Introducing C# • Understanding the basics of C# • Working with variables • Working with null values • Further exploring console applications Introducing C # This part of the book

How to use @ContentChildren in Angular

Image
  Content Children ContentChildren is a parameter decorator that is used to get the QueryList of elements or directives from the content DOM. The QueryList is updated whenever the  child element/component is added or removed. The child element reference is set in  QueryList  just before the  ngAfterContentInit  lifecycle Hook method. Let's take one example to understand better about   Content Children   Step 1 : Create a project using command ng new  Content-children-Example Step 2:   Add 2 more component using  ng g c component-name Step 3:  Place the below code  in child.component.html <h1>This is child Page </h1> <h2>{{message}}</h2>   Step 4 : Place the below code in  child.component.ts   import { Component, OnInit } from '@angular/core';   @Component({    selector: 'app-child',    templateUrl: './child.component.html', styleUrls: ['./child.component.scss'] }) export class ChildComponent implements On

How to use loadChildren - Lazyloading in Angular

Angular - How to use loadChildren - Lazyloading in Angular, ANGULAR WITH CORE .NET AND MVC RAZOR ENGINE   Lazy loading in Angular Lazy loading modules in Angular allows you to load modules when it is actually necessary. Lazy loading will help you to achieve performance. Lazy loading will help you to decrease the size. By using loadChildren(), we can implement Lazy loading in Angular  Let's take an example to understand it      Create a project, which will load different components from a different module. We will follow below method to implement lazy loading Step 1 : Create a new project using command ng new project-name

How to use Routing & Navigation in Angular

Image
Angular - How to use Routing & Navigation in Angular , ANGULAR WITH CORE .NET AND MVC RAZOR ENGINE  Routing & Navigation The Angular Router enables navigation from one view to the next as users perform application tasks.  Overview The browser is a familiar model of application navigation: Enter a URL in the address bar and the browser navigates to a corresponding page. Click links on the page and the browser navigates to a new page. Click the browser's back and forward buttons and the browser navigates backward and forward through the history of pages you've seen.  A few essential concept of routing An introduction to a few core router concepts will help orient you to the details that follow.

How to create @Directives in Angular

Image
Angular - How to create @Directives in Angular , ANGULAR WITH CORE .NET AND MVC RAZOR ENGINE  Directives in Angular What is Directive? The directive is markers on a DOM element that tell Angular to attach a specified behavior to that DOM element or even transform the DOM element and its children. Types of Directive There are 4 type of Directives listed below Components directives : It is mainly used to specify the HTML templates. It is the most commonly-used directive in an Angular project. It is decorated with the @component decorator e.g. app.component Structural directives : The structural directive is used to add or remove the HTML Element in the Dom Layout e.g. *ngIf , *ngFor .. etc Attribute directives :

How to Develop @Pipes in Angular

Image
Angular - How to Develop @Pipes in Angular, ANGULAR WITH CORE .NET AND MVC RAZOR ENGINE Pipes What is Pipes? Every application starts out with what seems like a simple task: get data, transform them, and show them to users. Getting data could be as simple as creating a local variable or as complex as streaming data over a WebSocket. A pipe takes in data as input and transforms it to the desired output. On this page, you'll use pipes to transform a component's birthday property into a human-friendly date. We can says about pipes - Pipe will help to you transform your value in desired output Types of Pipes Built-in pipes : - These pipes are in build pipes comes with Angular. You can use them in any template e.g. DatePipe, Upp

How to Develop Dynamic Components in Angular

Image
Angular - How to Develop Dynamic Components in Angularr , ANGULAR WITH CORE .NET AND MVC RAZOR ENGINE     What Dynamic Components Are   Dynamic component means, this is that component location which is not defined in angular at build time, that means the component is not used in anywhere in Angular template Rather, Component will be created at runtime and placed in the angular at runtime Let's take an example to understand it better Example : I want to render 3 component on button click dynamically in same page Solution : We will take below step to complete it 😊 Step 1: We will create 3 different components by using the following command. ng g c Home ng g c Index ng g c Welcome Step 2: Place below code in app.component.html ·            ·                                 <h1>Dynamic Fo