Easy Bug fix for input field not visible in angular material dark themes in 2 Steps

by with No Comment Angular

Learn how to Bug fix for input field not visible in angular material dark themes

Angular Material is one of the most favoured User Interfaces for Angular Web Application development. Angular Material is known for its easy binding with Angular Code and web applications built using Angular alongside Angular Material performs better when compared to other UI frameworks.

Although Angular Material has good performance, it is still known for its bugs and glitches when it comes to the user interface. Recently, the current version of Angular Material has this glitch in the coding especially when users incorporate the darker theme especially, the pink-bluegrey.css theme. The main glitch which is noted is that, when a mat-input is incorporated, the field border and the text cursor is not visible. When we look into it, we find that it’s not a bug but a glitch that has to be fixed manually. This can be fixed by simply adding a dark background colour to the division or container which holds the mat input field.

In order to insert the input field, import MatImportModule in app.module.ts first. Later from the documentation site of Angular Material copy and paste the example mat form field. Be cautious to copy-paste the HTML, CSS elements in the respective component. 

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>
<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>
Light Theme Output

By default the theme is indigo-pink and without any glitch, the browser will render the output and form fields will be visible. Now, when you change the theme to pink-bluegrey.css or purple-green.css the form input will not be visible. The following screenshot shows how it is affected. 
In order to fix this glitch, we can simply add the background colour to the form tag which contains the form input. The following coding and screenshot will show the rectified output. In the example-form CSS, add the last three classes to get the desired visible form field output.

Dark Theme Output
.example-form {
    min-width: 150px;
    max-width: 500px;
    width: 100%; 
    background-color: black;
    color: white;
    padding: 15px
  }
Bug fix for input field not visible in angular material dark themes
Bug fix for input field not visible in angular material dark themes
Get full Source Code of MatInput Fix for Dark Theme from Github
https://github.com/rdineshkumar88/angular-material/tree/master/MatInput-Dark-Theme-Glitch-Fix

Now that you have learnt Bug fix for input field not visible in angular material dark themes. You can also check our tutorial on Scrollable Angule Table. Check our Angular with Angular Material Training from Ampersand Academy

Responsive CSS Grid in Angular Material

Quickly implement Responsive CSS Grid in Angular Material in 2 Mins

by with No Comment Angular

Learn Responsive CSS Grid in Angular Material

n this tutorial, you will learn how to incorporate simple responsive CSS Grid Layout using a framework called Materialize CSS in Angular Material.

We write this tutorial, with the understanding that you have created an Angular Project and Angular Material version 6.2.1. If you are new to Angular and Angular Material, you must first learn about creating an Angular project and installing Angular Material in the same project. Currently, there is no proper grid layout in Angular Material. FlexLayout is one way to achieve Grid Layout. Here, we will discuss how to create a Grid Layout using Materialize CSS.

We have forked the CSS components such as Grid, Helpers, Typography from the Materialize CSS website. You can download the forked file at the link given below. In order to learn how the Materialize CSS Grid functions, follow this link: Materialize CSS Framework.

Download CSS

Once you have downloaded the forked Materialize CSS file, you will have to paste it into your src folder of Angular Project. The next step is to import the downloaded Materialize CSS forked file in the global stylesheet – style.css.

Responsive CSS Grid in Angular Material
Responsive CSS Grid in Angular Material

The code for doing it is:

@import "m-modified.css";
Add M-Modified CSS in Style CSS
Style CSS

Once you have included the above code in your style.css, you are all set to utilize the grid structure of Materialize CSS framework.

Walkthrough of how grid in Materialize CSS grid works:

The grid system in Materialize CSS framework works via rows and columns. For creating a row in Materialize CSS, you must create a division with a row as a class.

<div class=”row”></div>

The above code will create a row. Ideally, a single row will have 12 columns. Now, to create 2 columns in large and medium-size devices, use the following code:

<div class=”row”>
<div class=”col m6”> </div>
<div class=”col m6”> </div>
</div>

To make each column occupy entire row in small devices, use the following code

<div class=”row”>
<div class=”col m6 s12”> </div>
<div class=”col m6 s12”> </div>
</div>

To create three columns of equal width and occupying the entire row and all these columns to occupying entire row in small screens, use the following code:

<div class=”row”>
<div class=”col m4 s12”> </div>
<div class=”col m4 s12”> </div>
<div class=”col m4 s12”> </div>
</div>

You can also understand how the grid system works from Materialize CSS website. Once you have created columns according to your requirement, you can include all the necessary components such as forms, buttons, cards, lists inside each division.

<div class="row">
   <div class="col m4 s12">
      <h3>Column 1</h3>
   </div>
   <div class="col m4 s12">
      <h3>Column 2</h3>
   </div>
   <div class="col m4 s12">
      <h3>Column 3</h3>
   </div>
</div>
Mobile Columns
Mobile Columns

Once you have completely understood the grid structure, you can play around and create responsive grid layouts in Angular Material. Now that you have learnt how to implement Responsive CSS Grid in Angular Material, You can also learn about Scrollable Table in Angular Material.

Scrollable table in Angular Material

Implement Scrollable table in Angular Material with 2 easy steps

by with No Comment Angular

Learn how to make Scrollable table in Angular Material

In this tutorial, you will learn how to make a table with a large number of columns less cramped and make the table scrollable based on the number of columns we add to the table. 

We write this tutorial with a presumption that you already know to create a basic table in Angular Material. If not, please follow the link given below. 

https://material.angular.io/components/table/overview

Make sure you import all the necessary components in the app.module.ts and have created the fundamental table. 

One may likely have more than 15 columns in a single table on a project. When that happens, Angular Material by default compresses the column width and make it congested to accommodate the viewport width. 

It is nearly impossible to increase the column width or to make the table horizontally scroll to accommodate all the columns with relaxed spacing. There is no native fix in Angular Material for this. We have fixed it with a simple CSS trick.

All that you have to add the following CSS in style.css and call that class in a division. The class which we have added is table-responsive. However, you can rename it according to your preference. 

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  .mat-table {
      width: 100%;
      max-width: 100%;
      margin-bottom: 1rem;
      display: table;
      border-collapse: collapse;
      margin: 0px;
  }
  .mat-row,
  .mat-header-row {
      display: table-row;
  }
  .mat-cell,
  .mat-header-cell {
      word-wrap: initial;
      display: table-cell;
      padding: 0px 5px;
      line-break: unset;
      width: auto;
      white-space: nowrap;
      overflow: hidden;
      vertical-align: middle;
  }
}

You can copy and paste the above CSS in your style.css / style.scss file. Now create a fundamental table in any of your components. Now create the division with class, ‘table-responsive’. Now cut the table and paste it inside the division. This will enable you to create a table with more spaced and horizontally scrollable. The following is the code on how it appears in your HTML file. We have successfully made Scrollable table in Angular Material. 

<div class="table-responsive">
<table mat-table [dataSource]="dataSource">
<!-- Your Columns Here !>
</table>
</div><div class="table-responsive">
<table mat-table [dataSource]="dataSource">
<!-- Your Columns Here !>
</table>
</div>
Scrollable table in Angular Material
Scrollable table in Angular Material

Now that you learn the Scrollable table in Angular Material. You can check out the tutorial on Getting Started with Materialize CSS