Clara Gutmann

Clara Gutmann

1598694120

How to Use ngswitch Directive In Angular | Angular NgSwitch

Angular NgSwitch directive is used to conditionally swap the DOM structure on your template based on a scope expression. Elements within NgSwitch but without NgSwitchDefault directives will be preserved at the location as specified in the template.

NgSwitch chooses one of the nested elements and makes it visible based on which item matches the value obtained from the evaluated expression.

In other words, you define the container element (where you place the directive), place the expression on the on= “…” attribute (or the NgSwitch=”…” attribute), define any inner items inside of the directive, and place a when attribute per item.

When the attribute is used to inform NgSwitch, which item to display when the on expression is evaluated, if the matching expression is not found via the when attribute, then an element with the default attribute is displayed.

The [ngSwitch] directive on the container specifies an expression to match against.

The expressions to match are provided by the ngSwitchCase directives on views within the container.

  1. Every view that matches are rendered.
  2. If there are no matches, the view with a ngSwitchDefault directive is rendered.
  3. Elements within the [NgSwitch] statement but outside of any NgSwitchCase or ngSwitchDefault directive are preserved at the location.

Define the container element for the directive and specify a switch expression to match against as an attribute.

<container-element [ngSwitch]="switch_expression">

Within the container, *ngSwitchCase statements specify the match expressions as attributes.

Include *ngSwitchDefault as a final case.

<container-element [ngSwitch]="switch_expression">
   <some-element *ngSwitchCase="match_expression_1">...</some-element>
...
   <some-element *ngSwitchDefault>...</some-element>
</container-element>

Selector

[ngSwitch]

Properties

NgSwitch Example

Let’s imagine we wanted to display show names in different colors depending on where they are streaming.

With a bootstrap framework, we can change the text color using text-danger, text-success, text-warning, and text-primary classes.

We could solve this by having the series of *ngIf statements, like so,

<ul *ngFor="let show of shows">
  <li *ngIf="show.service ==='Netflix'"
      class="text-success">{{ show.name }} ({{ show.name }})
  </li>
  <li *ngIf="show.service === 'Disneyplus'"
      class="text-primary">{{ show.name }} ({{ show.name }})
  </li>
  <li *ngIf="show.service === 'HBOMax'"
      class="text-danger">{{ show.name }} ({{ show.country }})
  </li>
  <li *ngIf="show.service !== 'HBOMax' && person.country !== 'Netflix' && person.country !== 'Disneyplus'"
      class="text-warning">{{ show.name }} ({{ show.country }})
  </li>
</ul>

This initially seems to make sense until we create the other style item.

We have to check to see if the show is not from any of the previously specified services.

Resulting in a pretty long ngIf expression, and it will only get worse the more when we add new services.

Most languages, including javascript or typescript, have the language construct called the switch statement to solve this kind of problem.

Angular also provides us with the same functionality via the NgSwitch directive.

This directive allows us to render different items depending on the given condition, and in fact, the NgSwitch directive is several directives working in conjunction.

Okay, let’s deep dive into the example.

Step 1: Install the Angular project

Type the following command.

ng new angular-ngswitch

When you install a brand new Angular project, see the options they are providing while creating a new project. For example, we need the routing module to allow the Angular CLI to generate a routing module for us in this project.

I use Visual Studio Code as a programming editor to develop Angular applications.

Now, go inside the folder and open the project inside the VSCode.

Step 2: Write demo data in an app.component.ts file

Write the following code inside the app.component.ts file.

// app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  shows: any[] = [
    {
      name: 'Stranger Things',
      service: 'Netflix',
    },
    {
      name: 'The Mandalorian',
      service: 'Disneyplus',
    },
    {
      name: 'Game of Thrones',
      service: 'HBOMax',
    },
    {
      name: 'Amazon Prime',
      service: 'Fleabag',
    }
  ];
}

In the above code, we have added an array of objects to use that in an angular switch statement.

Step 3: Write a view app.component.html file.

Now, in this file, we include the NgSwitch directive.

<div class="container">
  <h4>NgSwitch Example</h4>
  <ul *ngFor="let show of shows" [ngSwitch]="show.service">
    <li *ngSwitchCase="'Netflix'" class="text-success">{{ show.name }} ({{ show.service }})
    </li>
    <li *ngSwitchCase="'Disneyplus'" class="text-primary">{{ show.name }} ({{ show.service }})
    </li>
    <li *ngSwitchCase="'HBOMax'" class="text-danger">{{ show.name }} ({{ show.service }})
    </li>
    <li *ngSwitchDefault class="text-warning">{{ show.name }} ({{ show.service }})
    </li>
  </ul>
</div>

We bind the expression to a ngSwitch directive.

Angular ngSwitchCase directive lets us define a condition that will render the item it’s attached to if it matches the expression.

If no conditions are met in the switch statement, it will check to see if there is a NgSwitchDefault directive; if there is, it will render the element attached to it. However, it is optional, and if it’s not present, it won’t display anything if no matching ngSwitchCase directive is found.

The main difference between the ngIf solution is that by using Angular NgSwitch, we evaluate an expression only once and then choose the element to display based on the result.

Let’s see the following output.

 

ngswitch Directive In Angular

The NgSwitch case in the above example is just an example and isn’t an efficient way of solving this problem. This is just a demo and practical example of using it inside our regular project.

We would use either the NgStyle or NgClass directives for the above example.

With the use of NgIf, we can conditionally add or remove an element from the DOM.

If we are faced with multiple conditions, a cleaner alternative to multiple nested NgIf statements is the NgSwitch series of directives.

Let’s remove some of the properties of the shows object.

Write the following code inside the app.component.ts file.

// app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  shows: any[] = [
    {
      name: 'The Mandalorian',
      service: 'Disneyplus',
    }
  ];
}

Now, we have only one property of Mandalorian, and now we should see only one show on the screen. Save the file, and you will see only Mandalorian will appear on the screen.

That means only this property matches the switch expression and prints on the screen.

#angular #ngswitch #angular ngswitch

What is GEEK

Buddha Community

Chloe Butler

Chloe Butler

1667425440

Pdf2gerb: Perl Script Converts PDF Files to Gerber format

pdf2gerb

Perl script converts PDF files to Gerber format

Pdf2Gerb generates Gerber 274X photoplotting and Excellon drill files from PDFs of a PCB. Up to three PDFs are used: the top copper layer, the bottom copper layer (for 2-sided PCBs), and an optional silk screen layer. The PDFs can be created directly from any PDF drawing software, or a PDF print driver can be used to capture the Print output if the drawing software does not directly support output to PDF.

The general workflow is as follows:

  1. Design the PCB using your favorite CAD or drawing software.
  2. Print the top and bottom copper and top silk screen layers to a PDF file.
  3. Run Pdf2Gerb on the PDFs to create Gerber and Excellon files.
  4. Use a Gerber viewer to double-check the output against the original PCB design.
  5. Make adjustments as needed.
  6. Submit the files to a PCB manufacturer.

Please note that Pdf2Gerb does NOT perform DRC (Design Rule Checks), as these will vary according to individual PCB manufacturer conventions and capabilities. Also note that Pdf2Gerb is not perfect, so the output files must always be checked before submitting them. As of version 1.6, Pdf2Gerb supports most PCB elements, such as round and square pads, round holes, traces, SMD pads, ground planes, no-fill areas, and panelization. However, because it interprets the graphical output of a Print function, there are limitations in what it can recognize (or there may be bugs).

See docs/Pdf2Gerb.pdf for install/setup, config, usage, and other info.

pdf2gerb_cfg.pm

#Pdf2Gerb config settings:
#Put this file in same folder/directory as pdf2gerb.pl itself (global settings),
#or copy to another folder/directory with PDFs if you want PCB-specific settings.
#There is only one user of this file, so we don't need a custom package or namespace.
#NOTE: all constants defined in here will be added to main namespace.
#package pdf2gerb_cfg;

use strict; #trap undef vars (easier debug)
use warnings; #other useful info (easier debug)


##############################################################################################
#configurable settings:
#change values here instead of in main pfg2gerb.pl file

use constant WANT_COLORS => ($^O !~ m/Win/); #ANSI colors no worky on Windows? this must be set < first DebugPrint() call

#just a little warning; set realistic expectations:
#DebugPrint("${\(CYAN)}Pdf2Gerb.pl ${\(VERSION)}, $^O O/S\n${\(YELLOW)}${\(BOLD)}${\(ITALIC)}This is EXPERIMENTAL software.  \nGerber files MAY CONTAIN ERRORS.  Please CHECK them before fabrication!${\(RESET)}", 0); #if WANT_DEBUG

use constant METRIC => FALSE; #set to TRUE for metric units (only affect final numbers in output files, not internal arithmetic)
use constant APERTURE_LIMIT => 0; #34; #max #apertures to use; generate warnings if too many apertures are used (0 to not check)
use constant DRILL_FMT => '2.4'; #'2.3'; #'2.4' is the default for PCB fab; change to '2.3' for CNC

use constant WANT_DEBUG => 0; #10; #level of debug wanted; higher == more, lower == less, 0 == none
use constant GERBER_DEBUG => 0; #level of debug to include in Gerber file; DON'T USE FOR FABRICATION
use constant WANT_STREAMS => FALSE; #TRUE; #save decompressed streams to files (for debug)
use constant WANT_ALLINPUT => FALSE; #TRUE; #save entire input stream (for debug ONLY)

#DebugPrint(sprintf("${\(CYAN)}DEBUG: stdout %d, gerber %d, want streams? %d, all input? %d, O/S: $^O, Perl: $]${\(RESET)}\n", WANT_DEBUG, GERBER_DEBUG, WANT_STREAMS, WANT_ALLINPUT), 1);
#DebugPrint(sprintf("max int = %d, min int = %d\n", MAXINT, MININT), 1); 

#define standard trace and pad sizes to reduce scaling or PDF rendering errors:
#This avoids weird aperture settings and replaces them with more standardized values.
#(I'm not sure how photoplotters handle strange sizes).
#Fewer choices here gives more accurate mapping in the final Gerber files.
#units are in inches
use constant TOOL_SIZES => #add more as desired
(
#round or square pads (> 0) and drills (< 0):
    .010, -.001,  #tiny pads for SMD; dummy drill size (too small for practical use, but needed so StandardTool will use this entry)
    .031, -.014,  #used for vias
    .041, -.020,  #smallest non-filled plated hole
    .051, -.025,
    .056, -.029,  #useful for IC pins
    .070, -.033,
    .075, -.040,  #heavier leads
#    .090, -.043,  #NOTE: 600 dpi is not high enough resolution to reliably distinguish between .043" and .046", so choose 1 of the 2 here
    .100, -.046,
    .115, -.052,
    .130, -.061,
    .140, -.067,
    .150, -.079,
    .175, -.088,
    .190, -.093,
    .200, -.100,
    .220, -.110,
    .160, -.125,  #useful for mounting holes
#some additional pad sizes without holes (repeat a previous hole size if you just want the pad size):
    .090, -.040,  #want a .090 pad option, but use dummy hole size
    .065, -.040, #.065 x .065 rect pad
    .035, -.040, #.035 x .065 rect pad
#traces:
    .001,  #too thin for real traces; use only for board outlines
    .006,  #minimum real trace width; mainly used for text
    .008,  #mainly used for mid-sized text, not traces
    .010,  #minimum recommended trace width for low-current signals
    .012,
    .015,  #moderate low-voltage current
    .020,  #heavier trace for power, ground (even if a lighter one is adequate)
    .025,
    .030,  #heavy-current traces; be careful with these ones!
    .040,
    .050,
    .060,
    .080,
    .100,
    .120,
);
#Areas larger than the values below will be filled with parallel lines:
#This cuts down on the number of aperture sizes used.
#Set to 0 to always use an aperture or drill, regardless of size.
use constant { MAX_APERTURE => max((TOOL_SIZES)) + .004, MAX_DRILL => -min((TOOL_SIZES)) + .004 }; #max aperture and drill sizes (plus a little tolerance)
#DebugPrint(sprintf("using %d standard tool sizes: %s, max aper %.3f, max drill %.3f\n", scalar((TOOL_SIZES)), join(", ", (TOOL_SIZES)), MAX_APERTURE, MAX_DRILL), 1);

#NOTE: Compare the PDF to the original CAD file to check the accuracy of the PDF rendering and parsing!
#for example, the CAD software I used generated the following circles for holes:
#CAD hole size:   parsed PDF diameter:      error:
#  .014                .016                +.002
#  .020                .02267              +.00267
#  .025                .026                +.001
#  .029                .03167              +.00267
#  .033                .036                +.003
#  .040                .04267              +.00267
#This was usually ~ .002" - .003" too big compared to the hole as displayed in the CAD software.
#To compensate for PDF rendering errors (either during CAD Print function or PDF parsing logic), adjust the values below as needed.
#units are pixels; for example, a value of 2.4 at 600 dpi = .0004 inch, 2 at 600 dpi = .0033"
use constant
{
    HOLE_ADJUST => -0.004 * 600, #-2.6, #holes seemed to be slightly oversized (by .002" - .004"), so shrink them a little
    RNDPAD_ADJUST => -0.003 * 600, #-2, #-2.4, #round pads seemed to be slightly oversized, so shrink them a little
    SQRPAD_ADJUST => +0.001 * 600, #+.5, #square pads are sometimes too small by .00067, so bump them up a little
    RECTPAD_ADJUST => 0, #(pixels) rectangular pads seem to be okay? (not tested much)
    TRACE_ADJUST => 0, #(pixels) traces seemed to be okay?
    REDUCE_TOLERANCE => .001, #(inches) allow this much variation when reducing circles and rects
};

#Also, my CAD's Print function or the PDF print driver I used was a little off for circles, so define some additional adjustment values here:
#Values are added to X/Y coordinates; units are pixels; for example, a value of 1 at 600 dpi would be ~= .002 inch
use constant
{
    CIRCLE_ADJUST_MINX => 0,
    CIRCLE_ADJUST_MINY => -0.001 * 600, #-1, #circles were a little too high, so nudge them a little lower
    CIRCLE_ADJUST_MAXX => +0.001 * 600, #+1, #circles were a little too far to the left, so nudge them a little to the right
    CIRCLE_ADJUST_MAXY => 0,
    SUBST_CIRCLE_CLIPRECT => FALSE, #generate circle and substitute for clip rects (to compensate for the way some CAD software draws circles)
    WANT_CLIPRECT => TRUE, #FALSE, #AI doesn't need clip rect at all? should be on normally?
    RECT_COMPLETION => FALSE, #TRUE, #fill in 4th side of rect when 3 sides found
};

#allow .012 clearance around pads for solder mask:
#This value effectively adjusts pad sizes in the TOOL_SIZES list above (only for solder mask layers).
use constant SOLDER_MARGIN => +.012; #units are inches

#line join/cap styles:
use constant
{
    CAP_NONE => 0, #butt (none); line is exact length
    CAP_ROUND => 1, #round cap/join; line overhangs by a semi-circle at either end
    CAP_SQUARE => 2, #square cap/join; line overhangs by a half square on either end
    CAP_OVERRIDE => FALSE, #cap style overrides drawing logic
};
    
#number of elements in each shape type:
use constant
{
    RECT_SHAPELEN => 6, #x0, y0, x1, y1, count, "rect" (start, end corners)
    LINE_SHAPELEN => 6, #x0, y0, x1, y1, count, "line" (line seg)
    CURVE_SHAPELEN => 10, #xstart, ystart, x0, y0, x1, y1, xend, yend, count, "curve" (bezier 2 points)
    CIRCLE_SHAPELEN => 5, #x, y, 5, count, "circle" (center + radius)
};
#const my %SHAPELEN =
#Readonly my %SHAPELEN =>
our %SHAPELEN =
(
    rect => RECT_SHAPELEN,
    line => LINE_SHAPELEN,
    curve => CURVE_SHAPELEN,
    circle => CIRCLE_SHAPELEN,
);

#panelization:
#This will repeat the entire body the number of times indicated along the X or Y axes (files grow accordingly).
#Display elements that overhang PCB boundary can be squashed or left as-is (typically text or other silk screen markings).
#Set "overhangs" TRUE to allow overhangs, FALSE to truncate them.
#xpad and ypad allow margins to be added around outer edge of panelized PCB.
use constant PANELIZE => {'x' => 1, 'y' => 1, 'xpad' => 0, 'ypad' => 0, 'overhangs' => TRUE}; #number of times to repeat in X and Y directions

# Set this to 1 if you need TurboCAD support.
#$turboCAD = FALSE; #is this still needed as an option?

#CIRCAD pad generation uses an appropriate aperture, then moves it (stroke) "a little" - we use this to find pads and distinguish them from PCB holes. 
use constant PAD_STROKE => 0.3; #0.0005 * 600; #units are pixels
#convert very short traces to pads or holes:
use constant TRACE_MINLEN => .001; #units are inches
#use constant ALWAYS_XY => TRUE; #FALSE; #force XY even if X or Y doesn't change; NOTE: needs to be TRUE for all pads to show in FlatCAM and ViewPlot
use constant REMOVE_POLARITY => FALSE; #TRUE; #set to remove subtractive (negative) polarity; NOTE: must be FALSE for ground planes

#PDF uses "points", each point = 1/72 inch
#combined with a PDF scale factor of .12, this gives 600 dpi resolution (1/72 * .12 = 600 dpi)
use constant INCHES_PER_POINT => 1/72; #0.0138888889; #multiply point-size by this to get inches

# The precision used when computing a bezier curve. Higher numbers are more precise but slower (and generate larger files).
#$bezierPrecision = 100;
use constant BEZIER_PRECISION => 36; #100; #use const; reduced for faster rendering (mainly used for silk screen and thermal pads)

# Ground planes and silk screen or larger copper rectangles or circles are filled line-by-line using this resolution.
use constant FILL_WIDTH => .01; #fill at most 0.01 inch at a time

# The max number of characters to read into memory
use constant MAX_BYTES => 10 * M; #bumped up to 10 MB, use const

use constant DUP_DRILL1 => TRUE; #FALSE; #kludge: ViewPlot doesn't load drill files that are too small so duplicate first tool

my $runtime = time(); #Time::HiRes::gettimeofday(); #measure my execution time

print STDERR "Loaded config settings from '${\(__FILE__)}'.\n";
1; #last value must be truthful to indicate successful load


#############################################################################################
#junk/experiment:

#use Package::Constants;
#use Exporter qw(import); #https://perldoc.perl.org/Exporter.html

#my $caller = "pdf2gerb::";

#sub cfg
#{
#    my $proto = shift;
#    my $class = ref($proto) || $proto;
#    my $settings =
#    {
#        $WANT_DEBUG => 990, #10; #level of debug wanted; higher == more, lower == less, 0 == none
#    };
#    bless($settings, $class);
#    return $settings;
#}

#use constant HELLO => "hi there2"; #"main::HELLO" => "hi there";
#use constant GOODBYE => 14; #"main::GOODBYE" => 12;

#print STDERR "read cfg file\n";

#our @EXPORT_OK = Package::Constants->list(__PACKAGE__); #https://www.perlmonks.org/?node_id=1072691; NOTE: "_OK" skips short/common names

#print STDERR scalar(@EXPORT_OK) . " consts exported:\n";
#foreach(@EXPORT_OK) { print STDERR "$_\n"; }
#my $val = main::thing("xyz");
#print STDERR "caller gave me $val\n";
#foreach my $arg (@ARGV) { print STDERR "arg $arg\n"; }

Download Details:

Author: swannman
Source Code: https://github.com/swannman/pdf2gerb

License: GPL-3.0 license

#perl 

Clara Gutmann

Clara Gutmann

1598694120

How to Use ngswitch Directive In Angular | Angular NgSwitch

Angular NgSwitch directive is used to conditionally swap the DOM structure on your template based on a scope expression. Elements within NgSwitch but without NgSwitchDefault directives will be preserved at the location as specified in the template.

NgSwitch chooses one of the nested elements and makes it visible based on which item matches the value obtained from the evaluated expression.

In other words, you define the container element (where you place the directive), place the expression on the on= “…” attribute (or the NgSwitch=”…” attribute), define any inner items inside of the directive, and place a when attribute per item.

When the attribute is used to inform NgSwitch, which item to display when the on expression is evaluated, if the matching expression is not found via the when attribute, then an element with the default attribute is displayed.

The [ngSwitch] directive on the container specifies an expression to match against.

The expressions to match are provided by the ngSwitchCase directives on views within the container.

  1. Every view that matches are rendered.
  2. If there are no matches, the view with a ngSwitchDefault directive is rendered.
  3. Elements within the [NgSwitch] statement but outside of any NgSwitchCase or ngSwitchDefault directive are preserved at the location.

Define the container element for the directive and specify a switch expression to match against as an attribute.

<container-element [ngSwitch]="switch_expression">

Within the container, *ngSwitchCase statements specify the match expressions as attributes.

Include *ngSwitchDefault as a final case.

<container-element [ngSwitch]="switch_expression">
   <some-element *ngSwitchCase="match_expression_1">...</some-element>
...
   <some-element *ngSwitchDefault>...</some-element>
</container-element>

Selector

[ngSwitch]

Properties

NgSwitch Example

Let’s imagine we wanted to display show names in different colors depending on where they are streaming.

With a bootstrap framework, we can change the text color using text-danger, text-success, text-warning, and text-primary classes.

We could solve this by having the series of *ngIf statements, like so,

<ul *ngFor="let show of shows">
  <li *ngIf="show.service ==='Netflix'"
      class="text-success">{{ show.name }} ({{ show.name }})
  </li>
  <li *ngIf="show.service === 'Disneyplus'"
      class="text-primary">{{ show.name }} ({{ show.name }})
  </li>
  <li *ngIf="show.service === 'HBOMax'"
      class="text-danger">{{ show.name }} ({{ show.country }})
  </li>
  <li *ngIf="show.service !== 'HBOMax' && person.country !== 'Netflix' && person.country !== 'Disneyplus'"
      class="text-warning">{{ show.name }} ({{ show.country }})
  </li>
</ul>

This initially seems to make sense until we create the other style item.

We have to check to see if the show is not from any of the previously specified services.

Resulting in a pretty long ngIf expression, and it will only get worse the more when we add new services.

Most languages, including javascript or typescript, have the language construct called the switch statement to solve this kind of problem.

Angular also provides us with the same functionality via the NgSwitch directive.

This directive allows us to render different items depending on the given condition, and in fact, the NgSwitch directive is several directives working in conjunction.

Okay, let’s deep dive into the example.

Step 1: Install the Angular project

Type the following command.

ng new angular-ngswitch

When you install a brand new Angular project, see the options they are providing while creating a new project. For example, we need the routing module to allow the Angular CLI to generate a routing module for us in this project.

I use Visual Studio Code as a programming editor to develop Angular applications.

Now, go inside the folder and open the project inside the VSCode.

Step 2: Write demo data in an app.component.ts file

Write the following code inside the app.component.ts file.

// app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  shows: any[] = [
    {
      name: 'Stranger Things',
      service: 'Netflix',
    },
    {
      name: 'The Mandalorian',
      service: 'Disneyplus',
    },
    {
      name: 'Game of Thrones',
      service: 'HBOMax',
    },
    {
      name: 'Amazon Prime',
      service: 'Fleabag',
    }
  ];
}

In the above code, we have added an array of objects to use that in an angular switch statement.

Step 3: Write a view app.component.html file.

Now, in this file, we include the NgSwitch directive.

<div class="container">
  <h4>NgSwitch Example</h4>
  <ul *ngFor="let show of shows" [ngSwitch]="show.service">
    <li *ngSwitchCase="'Netflix'" class="text-success">{{ show.name }} ({{ show.service }})
    </li>
    <li *ngSwitchCase="'Disneyplus'" class="text-primary">{{ show.name }} ({{ show.service }})
    </li>
    <li *ngSwitchCase="'HBOMax'" class="text-danger">{{ show.name }} ({{ show.service }})
    </li>
    <li *ngSwitchDefault class="text-warning">{{ show.name }} ({{ show.service }})
    </li>
  </ul>
</div>

We bind the expression to a ngSwitch directive.

Angular ngSwitchCase directive lets us define a condition that will render the item it’s attached to if it matches the expression.

If no conditions are met in the switch statement, it will check to see if there is a NgSwitchDefault directive; if there is, it will render the element attached to it. However, it is optional, and if it’s not present, it won’t display anything if no matching ngSwitchCase directive is found.

The main difference between the ngIf solution is that by using Angular NgSwitch, we evaluate an expression only once and then choose the element to display based on the result.

Let’s see the following output.

 

ngswitch Directive In Angular

The NgSwitch case in the above example is just an example and isn’t an efficient way of solving this problem. This is just a demo and practical example of using it inside our regular project.

We would use either the NgStyle or NgClass directives for the above example.

With the use of NgIf, we can conditionally add or remove an element from the DOM.

If we are faced with multiple conditions, a cleaner alternative to multiple nested NgIf statements is the NgSwitch series of directives.

Let’s remove some of the properties of the shows object.

Write the following code inside the app.component.ts file.

// app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  shows: any[] = [
    {
      name: 'The Mandalorian',
      service: 'Disneyplus',
    }
  ];
}

Now, we have only one property of Mandalorian, and now we should see only one show on the screen. Save the file, and you will see only Mandalorian will appear on the screen.

That means only this property matches the switch expression and prints on the screen.

#angular #ngswitch #angular ngswitch

Christa Stehr

Christa Stehr

1598940617

Install Angular - Angular Environment Setup Process

Angular is a TypeScript based framework that works in synchronization with HTML, CSS, and JavaScript. To work with angular, domain knowledge of these 3 is required.

  1. Installing Node.js and npm
  2. Installing Angular CLI
  3. Creating workspace
  4. Deploying your First App

In this article, you will get to know about the Angular Environment setup process. After reading this article, you will be able to install, setup, create, and launch your own application in Angular. So let’s start!!!

Angular environment setup

Install Angular in Easy Steps

For Installing Angular on your Machine, there are 2 prerequisites:

  • Node.js
  • npm Package Manager
Node.js

First you need to have Node.js installed as Angular require current, active LTS or maintenance LTS version of Node.js

Download and Install Node.js version suitable for your machine’s operating system.

Npm Package Manager

Angular, Angular CLI and Angular applications are dependent on npm packages. By installing Node.js, you have automatically installed the npm Package manager which will be the base for installing angular in your system. To check the presence of npm client and Angular version check of npm client, run this command:

  1. npm -v

Installing Angular CLI

  • Open Terminal/Command Prompt
  • To install Angular CLI, run the below command:
  1. npm install -g @angular/cli

installing angular CLI

· After executing the command, Angular CLI will get installed within some time. You can check it using the following command

  1. ng --version

Workspace Creation

Now as your Angular CLI is installed, you need to create a workspace to work upon your application. Methods for it are:

  • Using CLI
  • Using Visual Studio Code
1. Using CLI

To create a workspace:

  • Navigate to the desired directory where you want to create your workspace using cd command in the Terminal/Command prompt
  • Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:
  1. Ng new YourAppName

create angular workspace

  • After running this command, it will prompt you to select from various options about the CSS and other functionalities.

angular CSS options

  • To leave everything to default, simply press the Enter or the Return key.

angular setup

#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli

Ayyaz Zafar

1624138795

Angular Material Autocomplete - Multiple Use Cases covered

Learn How to use Angular Material Autocomplete Suggestions Search Input. I covered multiple use cases.

Please watch this video. I hope this video would be helpful for you to understand it and use it in your projects

Please subscribe: https://www.youtube.com/channel/UCL5nKCmpReJZZMe9_bYR89w

#angular #angular-material #angular-js #autocomplete #angular-material-autocomplete #angular-tutorial

Roberta Ward

Roberta Ward

1593184320

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular.

Angular is a Typescript-based open-source front-end web application platform. The Angular Team at Google and a community of individuals and corporations lead it. Angular lets you extend HTML’s syntax to express your apps’ components clearly. The angular resolves challenges while developing a single page and cross-platform applications. So, here the meaning of the single-page applications in angular is that the index.html file serves the app. And, the index.html file links other files to it.

We build angular applications with basic concepts which are NgModules. It provides a compilation context for components. At the beginning of an angular project, the command-line interface provides a built-in component which is the root component. But, NgModule can add a number of additional components. These can be created through a template or loaded from a router. This is what a compilation context about.

What is a Component in Angular?

Components are key features in Angular. It controls a patch of the screen called a view. A couple of components that we create on our own helps to build a whole application. In the end, the root component or the app component holds our entire application. The component has its business logic that it does to support the view inside the class. The class interacts with the view through an API of properties and methods. All the components added by us in the application are not linked to the index.html. But, they link to the app.component.html through the selectors. A component can be a component and not only a typescript class by adding a decorator @Component. Then, for further access, a class can import it. The decorator contains some metadata like selector, template, and style. Here’s an example of how a component decorator looks like:

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.scss']
})

Role of App Module

Modules are the package of functionalities of our app. It gives Angular the information about which features does my app has and what feature it uses. It is an empty Typescript class, but we transform it by adding a decorator @NgModule. So, we have four properties that we set up on the object pass to @NgModule. The four properties are declarations, imports, providers, and bootstrap. All the built-in new components add up to the declarations array in @NgModule.

@NgModule({
declarations: [
  AppComponent,
],
imports: [
  BrowserModule,
  HttpClientModule,
  AppRoutingModule,
  FormsModule
],
bootstrap: [AppComponent]
})

What is Data Binding?

Data Binding is the communication between the Typescript code of the component and the template. So, we have different kinds of data binding given below:

  • When there is a requirement to output data from our Typescript code in the HTML template. String interpolation handles this purpose like {{data}} in HTML file. Property Binding is also used for this purpose like [property] = “data”.
  • When we want to trigger any event like clicking a button. Event Binding works while we react to user events like (event) = “expression”.
  • When we can react to user events and output something at the same time. Two-way Binding is used like [(ngModel)] = “data”.

image for understanding data binding

#angular #javascript #tech blogs #user interface (ui) #angular #angular fundamentals #angular tutorial #basics of angular