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

First Program in TypeScript

Easy tutorial on creating First program in TypeScript in 2021

by with No Comment TypeScript

Learn how to create the first program in typescript and print it in the command prompt

In this tutorial, we will learn how to create a variable using TypeScript and how to print a variable in TypeScript. We have written this tutorial with the consideration that you have already installed TypeScript, if not, kindly follow the link to install TypeScript in your system.

Getting started with TypeScript

First Program in TypeScript
First Program in TypeScript

Once the TypeScript is installed, you can check the TypeScript version from the command prompt. The coding to check the version is present in the above link.

Now, let’s see how to create a variable and print the variable in TypeScript. By default, we cannot see the output directly from the TypeScript; we will first run the TypeScript file using the command.

tsc filename.ts

The above command will generate the corresponding js file. Once created, we will run the js using the following code.

node filename.js

The above code will create the desired result. We can create a file with extension .ts from any of our code editors such as Brackets, Sublime, Notepad or Visual Code. After creating the ts file, now we can check how to create a variable and print the variable. To create a variable, we will type the following code. 

let name1="John Doe"

The above syntax creates a variable “name1”, and we have assigned the value “John Doe” to it. After creating a variable, we need to print it. To print the variable, we will use the following code. 

console.log(name1)

Now we will go to the command prompt to execute the TypeScript. Open the Command Prompt and navigate to the corresponding directory where you have stored the ts file. Then type 

tsc demo.ts

Please note that demo.ts is the filename we have created for this program. The above command will generate a demo.js file automatically. We can execute only the demo.js file to view the output. You can see the difference in the coding.

var name1 = "John Doe";
console.log(name1);

Now we can run the js file by typing.

node demo.js

The above code will produce the output in the command prompt itself as follows. 

John Doe

Now that you have created the First program in TypeScript, Try practising the first program in TypeScript. In the next tutorial, we will teach how to create an array in TypeScript and print it. Check our Angular with Angular Material Training from Ampersand Academy

Getting started with TypeScript

Getting started with TypeScript in 2021 – Quick Read

by with No Comment TypeScript

Know what is TypeScript, its Benefits and how to install TypeScript in Windows, Mac and Linux Machines. Getting started with TypeScript

Getting started with TypeScript
Getting started with TypeScript

TypeScript is a superset of JavaScript and has some vital advantages which make it profoundly used in Angular, React. Following are the key points that make TypeScript unique which includes but are not limited to 

  1. Discretionary static typing(the key here is discretionary)
  2. Intuitive Type Interface which allows programmers to get more code without typing 
  3. Early access to ES6 and ES7 features even before support from various browsers
  4. TypeScript automatically compiles to comfortable JS versions which render in all major browsers
  5. Support from IntelliSense which makes TypeScript robust and user-friendly for programmers

Now that we have discussed TypeScript and its benefits, let’s deep dive into TypeScript installation.

Step 1: Make sure you have installed Node 

Step 2: Open Command Prompt in your system. Rest assured; TypeScript is compatible in all Windows, Mac and Linux systems

Step 3: Type tsc in command prompt. The tsc command shows TypeScript version if already installed or if not installed already it will throw an error

Step 4: If tsc command throws the error you can install the TypeScript with the following command 

npm install -g typescript

or

npm i typescript

-g describes the global installation, and i describes the local folder installation of TypeScript
Step 5: The above command will install the TypeScript
Step 6: Once installed you can check the correctness of installation by typing tsc in Command Prompt

Going further we will discuss our first program in TypeScript.

Now that you have learnt about Getting started with TypeScript. You can also check our Roadmap to Web Development in 2021. 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

Roadmap to web development

Proven Roadmap to web development in 2021

by with No Comment Web Development

Learn the Proven Roadmap to web development in 2021

In this tutorial, we will discuss the Roadmap to web development. We will discuss the technologies and tools that you should learn to become a web developer are. 

2 Parts in web development

Any website has two parts: 

  • Frontend
  • Backend
Roadmap to web development
Roadmap to web development

Frontend: 

The front end is the part where we see and interact with a website in a browser. It is the part where we can click and feel all the visual elements of the website. 

Frontend Technologies: 

HTML – HyperText Markup Language 

HTML defines the building blocks of the front end. It is not an actual language but a markup since we cannot use them to instruct a computer. 

CSS – Cascading Style Sheets

CSS is for styling web pages and making them beautiful. CSS is also not an actual language.

JS – JavaScript

Adds functionality to the website. JS is a language we can instruct the computer to do certain operations using JavaScript. 

Frameworks

Generally, a Website or Web Application has a set of repetitive blocks. Frameworks or libraries help you with making the front end development quick and feature-rich. Few of the frontend frameworks include React, Angular and Vue. 

Which Framework to use

Ideally, there is no rule book to follow. Each company and each project requires a different framework. Suppose you’re looking to learn a frontend library or Framework. In that case, it is better to get started with React since it’s used in several projects and companies and later, you can also learn Angular or Vue or any new framework that will serve you in your projects.

Backend: 

The backend is the part that powers the front end. It is about storing the data, displaying the data and consists of databases. Backend is a technical term that web experts and coders utilize. Fundamentally, the backend is the software engineer’s code that encompasses server-side activities, incorporating CRUD functionality with the database and all server logics. Backend technologies which you can learn in 

2021 includes NodeJS, Java, Kotlin, Python and Ruby on Rails. Databases that you can know for web development include but are not limited to MySQL, Postgre SQL.

Web Development Jobs:

  • Front end Development – HTML + CSS + JS
  • Back end Development – Language + Database
  • Full Stack Development – Front end + Backend 

Timeline to learn:

HTML + CSS – 6 Weeks

JS – 6 Weeks

React – 6 Weeks

NodeJS / Python – 9 Weeks

SQL – 6 Weeks

Now that you know Roadmap to web development, Good luck with your endeavour to become a Web Developer. Follow our website to learn and get tips and other plugins you require in your web development projects. Learn about Materialize CSS, one of the famous CSS Frameworks used in website and web development.