Edison  Stark

Edison Stark

1600080120

Custom Theme for Angular Material Components Series:

Understand Theme of Angular Material and its different Components by taking a deep look into Angular Material Components’ github repo.

Understand Theme of Angular Material and its different Components.

This is the second part of the series. First, we created an Angular Project with a custom theme, a dark theme, custom typography for headings and couple of helper modules (MaterialModule and SharedModule).

In this part, we will understand Material Theming by taking a deep look into Angular Material Components’ github repo.


THIS AD MAKES CONTENT FREE. HIDE

Understand Material Theming: A deep look into Angular Material Components’ repo#

Let’s take a look at related stylesheets on their GitHub repo. I would request you to open up repo in new tab or window, because we are going to check some files from it.

I would also recommend you to clone and open the code base from my GitHub, for better understanding when referred.

Theme Generation Process#

I will guide you through some important folders and files from Angular Material’s repo, which are directly related to our application’s Material Theme. But before that, I would like to remind you that in our application’s 📄 styles.scss and 📄 theme.scss files, we have these very important lines. I have combined lines from both the files and have also referenced through a step number:

Step 0️⃣ src/style.scss - LINE 7
@import '~@angular/material/theming';
<>
Step 1️⃣ src/style.scss - LINE 13
@include mat-core();
<>
Step 2️⃣ src/theme.scss - LINE 7
$theming-material-components-primary: mat-palette($mat-indigo);
$theming-material-components-accent: mat-palette($mat-pink, A200, A100, A400);
$theming-material-components-warn: mat-palette($mat-red);
<>
Step 3️⃣ src/theme.scss - LINE 12
$theming-material-components-theme: mat-light-theme(
  $theming-material-components-primary,
  $theming-material-components-accent,
  $theming-material-components-warn
);
<>
Step 4️⃣ src/style.scss - LINE 25
@include angular-material-theme($theming-material-components-theme);
<>
Step 5️⃣ src/theme.scss - LINE 30
$dark-primary: mat-palette($mat-blue-grey);
$dark-accent: mat-palette($mat-amber, A200, A100, A400);
$dark-warn: mat-palette($mat-deep-orange);
$dark-theme: mat-dark-theme(
  (
    color: (
      primary: $dark-primary,
      accent: $dark-accent,
      warn: $dark-warn,
    ),
  )
);
<>
Step 6️⃣ src/style.scss - LINE 34
.dark-theme {
  @include angular-material-color($dark-theme);
}
<>
Step 7️⃣ src/theme.scss - LINE 19
$heading-font-family: "'Work Sans', sans-serif";
$typography: mat-typography-config(
  $display-4: mat-typography-level(112px, $font-family: $heading-font-family),
  $display-3: mat-typography-level(56px, $font-family: $heading-font-family),
  $display-2: mat-typography-level(45px, $font-family: $heading-font-family),
  $display-1: mat-typography-level(34px, $font-family: $heading-font-family),
  $headline: mat-typography-level(24px, $font-family: $heading-font-family),
  $title: mat-typography-level(20px, $font-family: $heading-font-family),
);
<>
Step 8️⃣ src/style.scss - LINE 39
@include angular-material-typography($typography);
<>

Just keep in mind these lines, we are going to relate them with some of the files from Angular Material repo’s 📂src/material folder.

Tip:_ Look for the 💡, ⛳, ☝️, 👈, 👉,   or numeric symbols in the rest of article, that will help you relate._

#angular #scss #typography

What is GEEK

Buddha Community

Custom Theme for Angular Material Components Series:

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

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

Custom Theme for Angular Material Components Series: Apply Theme

Summary#

This is the third article of Custom Theme for Angular Material Components Series. In the first and second, we understood how Angular Material’s and its components’ themes work.

In this article we will proceed to modify default theme of components. Below is what we will be doing:

  1. Understand theme of MatToolbar
  2. Apply MatToolbar’s theme to MatSidenav and MatDialog
  3. Create a different theme for MatSnackbar and nice styling for different kind of notifications (default, info, success, warning, error)

1. Understand theme of MatToolbar#

Now as you know, how each components theme is included in our application, let’s move ahead and see MatToolbar’s theme: _src/material/toolbar/toolbar-theme.scss:

...

@mixin mat-toolbar-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  .mat-toolbar {
    background: mat-color($background, app-bar);
    color: mat-color($foreground, text);

    &.mat-primary {
      @include _mat-toolbar-color($primary);
    }

    &.mat-accent {
      @include _mat-toolbar-color($accent);
    }

    &.mat-warn {
      @include _mat-toolbar-color($warn);
    }

    @include _mat-toolbar-form-field-overrides;
  }
}

@mixin mat-toolbar-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-toolbar,
  .mat-toolbar h1,
  .mat-toolbar h2,
  .mat-toolbar h3,
  .mat-toolbar h4,
  .mat-toolbar h5,
  .mat-toolbar h6 {
    @include mat-typography-level-to-styles($config, title);
    margin: 0;
  }
}

...

@mixin mat-toolbar-theme($theme-or-color-config) {
  ...
      @include mat-toolbar-color($color);
      ...
      @include _mat-toolbar-density($density);
      ...
      @include mat-toolbar-typography($typography);
  ...
}

#angular #components

Modesto  Bailey

Modesto Bailey

1589640960

Let's implement a Theme Switch like the Angular Material Site

Learn how to implement a Theme Picker from scratch, for your Angular App. This is a beginners guide and you’ll get to know the best practices you should follow along the way.

This article is mainly intended for beginners. I’ve added a TL;DR; below as a precautionary measure, in case you’re a more advanced Angular Developer. Please feel free to navigate to a section that is most interesting to you.

#angular #angular9 #angular-material #material-design #angular-cli

Fredy  Larson

Fredy Larson

1598542260

Custom Theme for Angular Material Components Series: Part 1

Some time back, I was going through questions on stack-overflow. A question regarding applying same theme to mat-sidenav as mat-toolbar appeared at my feed. You can check the question here.

Although I answered the question with sample code, I thought of expanding the same context to more components and make a nice formatted code-base. Which can be useful to my upcoming projects and yours, too.

By end of this series, you would have an idea about creating and applying your own Custom Theme to Angular Material Components.

Table of Contents#

  1. Create an Angular Project using Angular CLI and add Angular Material
  2. Understand Angular Material Custom Theme
  3. Create Base Theme Files
  4. Update Project Structure with few new modules
  5. Create basic UI skeleton

1. Create an Angular Project using Angular CLI and add Angular Material#

npm i -g @angular/cli
ng new theming-material-components --style=scss --skipTests --routing=false
<>

👉 _--style__ will set our styling partner, i.e. _scss__--skipTests_ will skip generating ‘spec.ts’ files for our project and _--routing=false_ will not generate ( and ask about) routing module. You can learn more about CLI options here._

Once it’s done…

cd theming-material-components
ng serve -o
<>

Now, to add Angular Material, we will follow official guideline from Angular Material Getting Started:

ng add @angular/material
<>

The ng add command will install Angular Material, the Component Dev Kit (CDK)Angular Animations and ask you the following questions to determine which features to include:

  1. Choose a prebuilt theme name, or “custom” for a custom theme: Select Custom
  2. Set up global Angular Material typography styles?: Yes
  3. Set up browser animations for Angular Material?: Yes

The ng add command will additionally perform the following configurations:

  • Add project dependencies to package.json
  • Add the Roboto font to your index.html
  • Add the Material Design icon font to your index.html
  • Add a few global CSS styles to:
  • Remove margins from body
  • Set height: 100% on html and body
  • Set Roboto as the default application font

You’re done! Angular Material is now configured to be used in your application.

2. Understand Angular Material Custom Theme#

Let’s look at 📄 style.scss file:

// src/styles.scss

// Custom Theming for Angular Material

// For more information: https://material.angular.io/guide/theming

@import "~@angular/material/theming";
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!

@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/

$theming-material-components-primary: mat-palette($mat-indigo);
$theming-material-components-accent: mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).

$theming-material-components-warn: mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).

$theming-material-components-theme: mat-light-theme(
  $theming-material-components-primary,
  $theming-material-components-accent,
  $theming-material-components-warn
);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.

@include angular-material-theme($theming-material-components-theme);

/* You can add global styles to this file, and also import other style files */

html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

#angular #theme #scss