ng-template, ng-container and ng-content

1) <ng-template></ng-template>

As the name suggests the <ng-template> is a template element that Angular uses with structural directives ( *ngIf , *ngFor , [ngSwitch] and custom directives). These template elements only work in the presence of structural directives, which help us to define a template that doesn’t render anything by itself, but conditionally renders them to the DOM. It helps us create dynamic templates that can be customized and configured.

In the above example, If the condition is false then we will show the…


ViewEncapsulation
ViewEncapsulation
ViewEncapsulation

In Angular, component CSS styles are encapsulated into the component’s view and don’t affect the rest of the application.

As we know Angular Components are made up of three things:

  1. Component Class
  2. Template
  3. Style

The combination of these three factors makes an Angular component reusable across an application. Angular also provides these feature for Components and we can control it with the encapsulation property.

We can set the view encapsulation mode in the component metadata to control how this encapsulation happens on a per component basis.

The valid values for this config property are:

  • ViewEncapsulation.ShadowDom
  • ViewEncapsulation.Emulated
  • ViewEncapsulation.None

The default value…


react

Refs make it possible to access DOM nodes directly within React. This comes in handy in situations where, just as one example, you want to change the child of a component. Let’s say you want to change the value of an <input> element, but without using props or re-rendering the whole component.

When to use Refs:

Here are a few good use cases for refs:

  • Managing focus, text selection, or media playback.
  • Triggering imperative animations.
  • Integrating with third-party DOM libraries.

We can use ref in functional and class components both by using React.useRef and React.createRef respectively.

React.createRef and React.useRef

Both React APIs are used to create a…


mv Command

The mv command is one of the basic Linux commands for copying files and directories from one location to another.

mv [options] source destination

Move a File from One Location to Another in Linux Using the mv Command


cp Command

The cp command is one of the basic Linux commands for copying files and directories from one location to another.

When copying files from source to destination, the source file name does not change, but we can change the target file name if we need to.

cp [Option] [Source] [Destination]


pacakge.json

All npm packages contain a file, usually in the project root, called package. json — this file holds various metadata relevant to the project. This file is used to give information to npm that allows it to identify the project as well as handle the project’s dependencies.
So when we are installing new packages and get your package.json updated.
Taking a closer look, you notice that there’s something in front of the version numbers.


Bootstrap and Angular

As we know, Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

I found two ways to use bootstrap in Angular. Here is the integration of bootstrap in both ways:

a) Steps to integrate normal Bootstrap in your Angular project:


How to combine Strings with the different Case style. Different languages prefer different naming conventions and different letter case styles.

Case Types

There are four types of case style we used to combine string:

  • camelCase
  • PascalCase
  • snake_case
  • kebab-case

1) Camel Case (camelCase):

The name refers to the internal capital letters, which resemble the humps on a camel’s back.

Vibha Sharma

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store