Javascript

Vue.js

Ui-Kit

Typed.js

Tailwind CSS

Swiper.js

Split.js

Skeleton CSS

Shoelace Style

Shine.js

Semantic-UI

SASS/SCSS

Rainyday.js

Particles.js

PagePiling.js

Page.js

Nes-css

Materialize CSS

Material Angular

Less CSS

Website Layout

Jquery

Intro.js

HTML 5 & CSS3

FrontendMentor Challenges

Freezeframe.js

Foundation CSS

Clone

Bulma CSS

Bootstrap

Angular

Tilt.js

Template Name:- Angular Material Delete Popup Using Bottom Sheet.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; HTML, External CSS, Angular CLI, and Material Angular.
In this user interface, we used bottom-sheet angular material components. Also, we used buttons on click to show the bottom popup.
Also read:-&nbsp;<a href="../angular-material-responsive-sub-navigation-menu/" target="_blank" rel="noreferrer noopener">Angular Material Responsive Sub Navigation Menu</a>
To make it responsive we used media queries and also we modified the bottom sheet used classes. These are fully responsive and mobile-friendly elements.
Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

Demo

Download Now

In this user interface, we used bottom-sheet angular material components. Also, we used buttons on click to show the bottom popup.

Angular Material Delete Popup Using Bottom Sheet

Template Name:- Angular Material Responsive Sub Navigation Menu.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; HTML, External CSS, Angular CLI, and Material Angular.
Navigation Menu has multiple links to show categories with a click/hover more sub category's. So here we made a Responsive Sub Navigation Menu in Material Angular with CSS.
Also Read:-&nbsp;<a href="../ngx-slick-carousel-in-angular-material-card-with-custom-arrows/" target="_blank" rel="noreferrer noopener">Ngx Slick Carousel In Angular Material Card with Custom Arrows</a>
In this Navigation Menu, we used Angular Material components and also modify CSS classes. Here we used a menu with and ripple effects on clicks. Also, we used a responsive side Expansion Panel. To show all sub-links in expandable details views. To make a clickable toggle we used material icons and functions. These fully responsive and mobile-friendly elements.
Make it yours now by using it, downloading it and please share it. we will design more elements for you.

The Navigation Menu has multiple links to show categories with a click/hover more sub category. So here we made a Responsive Sub Navigation Menu in Material Angular with CSS.

Angular Material Responsive Sub Navigation Menu

Template Name:- Ngx Slick Carousel In Angular Material Card with Custom Arrows.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; HTML, External SCSS, Angular CLI, Ngx-slick-carousel and Material Angular.
Angular Material is a UI component-based framework with use to build web applications with an attractive interface. So here we try to make a carousel slider help of&nbsp;<a href="https://www.npmjs.com/package/ngx-slick-carousel" target="_blank" rel="noreferrer noopener">Ngx-slick-carousel npm</a>&nbsp;with an angular material card.
Also Read:-&nbsp;<a href="../angular-material-with-bootstrap-responsive-mega-menu/" target="_blank" rel="noreferrer noopener">Angular Material With Bootstrap Responsive Mega Menu</a>
In these elements, we used font awesome CDN for left and right-click action. Also, we used SCSS to make this element user-friendly. Here we used icon and CSS properties ts file and IMG binding in the same ts. These are fully responsive and mobile-friendly elements.
Make it yours now by using it, downloading it and please share it. we will design more elements for you.

Angular Material is a UI component-based framework with use to build web applications with an attractive interface. So here we try to make a carousel slider help of Ngx-slick-carousel npm with an angular material card.

Ngx Slick Carousel In Angular Material Card with Custom Arrows

Template Name:- Crud Table In Angular Material With Local Storage(edit/save/delete).
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; HTML, External SCSS, Angular CLI and Material Angular.
In this crud, we simply used an angular material table component. Here we used button components to make an action in the particular table row for update data or delete entire data.
Also read:-&nbsp;<a href="../pricing-table-in-angular-material/" target="_blank" rel="noreferrer noopener">Pricing Table In Angular Material</a>
We used local storage to store our new data or changes with the help of input fields. here we also used keyup method to show input values in the console. Also, we use the JSON parameter for pass values in input fields. In this crud, we used to edit, save and delete functions and also used stringify for exchange data to input to table.
Make it yours now by using it, downloading it and please share it. we will design more elements for you.

In this crud, we simply used an angular material table component. Here we used button components to make an action in the particular table row for update data or delete entire data.

Crud Table In Angular Material With Local Storage(Edit/Save/Delete)

Template Name: Angular Material Background Color Change On Button Click.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; HTML, External SCSS, Angular CLI and&nbsp;<a href="https://material.angular.io/" target="_blank" rel="noreferrer noopener">Material Angular</a>.
Change background colors using a button click with the help of ngClass in angular. It is easy to make this with different functions on button clicks. Here we make this in angular material with buttons and forms.
Also Read:-&nbsp;<a href="../contact-us-form-using-angular-material/" target="_blank" rel="noreferrer noopener">Contact Us Form Using Angular Material</a>
We use CSS classes of background colour properties to make background colour change on click. Also, we used string values to make these changeable values with functions' help.
Make it yours now by using it, downloading it and please share it. we will design more elements for you.

Change background colors using a button click with the help of ngClass in angular. It is easy to make this with different functions on button clicks. Here we make this in angular material with buttons and forms.

Angular Material Background Color Change On Button Click

Template Name: Full-Screen Bottom Sheet With Social Share Button In Angular Material.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; HTML, External SCSS,&nbsp;<a href="https://fontawesome.com/" target="_blank" rel="noreferrer noopener">Font Awesome</a>, Angular CLI and Material Angular.
Social sharing is an essential part of sites to get visitors. So here we made In Angular Material Full-Screen Bottom Sheet With Social Share Button/icons.
Also read:-&nbsp;<a href="../angular-material-with-bootstrap-responsive-mega-menu/" target="_blank" rel="noreferrer noopener">Angular Material With Bootstrap Responsive Mega Menu</a>
To make this more attractive, we modify the bottom sheet class, and we use font-awesome icons to show which brand or which social icons it is. Also, we use flex CSS proprieties with justify-content to make this proper button centre aligns. Also is a fully responsive element for mobile and tablet views.
Make it yours now by using it, downloading it and please share it. we will design more elements for you.

Social sharing is an essential part of sites to get visitors. So here we made In Angular Material Full-Screen Bottom Sheet With Social Share Button/icons.

Full-Screen Bottom Sheet With Social Share Button In Angular Material

Template Name: Simple FAQ In Angular Material with Ripples.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; HTML, External SCSS, Angular CLI and Material Angular.
Faq is mostly used for a general question that is user has to know and some websites served that type of question. So here made a simple faq in angular material with the help of material angular UI components frameworks.
In this element, we used ripple effects which are already given in this framework we just used in the mat-header side. After that, we modify the height of the header and also customize material angular components CSS/SCSS styles. This is a responsive faq section for mobile and also tablets side.
Make it yours now by using it, downloading it and please share it. we will design more elements for you.

Faq is mostly used for a general question that is user has to know and some websites serve that type of question. So here made a simple faq in angular material with the help of material angular UI components frameworks.

Simple FAQ In Angular Material with Ripples

Template Name: Angular Material With Bootstrap Responsive Mega Menu.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; HTML, External SCSS, Bootstrap(npm) Angular CLI and Material Angular.
Megamenu is used to show a different category within the content view. So here we made a responsive Megamenu with the help of a bootstrap grid and Angular Material components and CSS/SCSS.
In this element, we used the bootstrap grid, and on the component side, we used angular martial buttons and a toolbar. Here we also modify button and icon classes. Also, we used media quries for making this mega menu fully responsive. We used mat-icons to show this mega menu in on clicks. This is a fully responsive element for mobile and tablet views.
Make it yours now by using it, downloading it and please share it. we will design more elements for you.

Megamenu is used to show a different category within the content view. So here we made a responsive Megamenu with the help of a bootstrap grid  Angular Material components and CSS/SCSS.

Angular Material With Bootstrap Responsive Mega Menu

Template Name: Auto Suggestion Search Bar With Icon In Angular Material.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included: &ndash; HTML, External SCSS, Angular CLI, and Material Angular.
In this element, we used angular martial input filed with an autocomplete suggestion options panel. So here we made an Auto Suggestion Search Bar With Icon In Angular Material with the help of SCSS/CSS and Material components.
In this search box, we modify the martial angular class and components background and text colors. Also, we used CSS display flex properties with alignment items and columns for making this element center. This is a fully responsive element for mobile and tablet views.
Make it yours now by using it, downloading it, and sharing it. we will design more elements for you.

In this element, we used an angular martial input field with an autocomplete suggestion options panel. So here we made an Auto Suggestion Search Bar With an Icon In Angular Material with the help of SCSS/CSS and Material components.

Auto Suggestion Search Bar With Icon In Angular Material

Template Name: Google Search Clone In Angular Material.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; HTML, External SCSS, Angular CLI and Material Angular.
Google is the number one search engine portal where people can search for any queries. So here we made a google search page clone angular martial with the help of CSS properties and martial angular components.
In this project, we used a basic angular structure with the help of HTML tags. Here we used flex-box properties to make this page properly aligned. We also modify classes of angular martial components. Here we used a button, Toolbar, input fields, menu, mat-icons, and list components which are well given in angular material. This is a fully responsive landing page for mobile and tablet views.
Make it yours now by using it, downloading it and please share it. we will design more elements for you.

Google is the number one search engine portal where people can search for any queries. So here we made a google search page clone angular martial with the help of CSS properties and martial angular components.

Google Search Clone In Angular Material

Template Name: Angular Material Landing Page.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included: &ndash; HTML, External CSS, images(Unsplash), Angular CLI, and Material Angular.
The landing page is important to show as the main page of the website which we call the home page. So here we design and make a simple and attractive landing page in Angular Material with the help of SCSS features.
In these templates, we used angular material components and also we modified components styling. Here we used the mat-toolbar in the header nav and also for the footer we used the same components. Also, we used the mat list component as a horizontal list view. Here we also use a custom grid using flex-box for the desktop side and for the mobile side we used media queries.
we also used one input filed component for Subscribes. This is a fully responsive landing page for mobile and tablet views.
Make it yours now by using it, downloading it and please share it. we will design more elements for you.

The landing page is important to show as the main page of the website which we call the home page. So here we design and make a simple and attractive landing page in Angular Material with the help of SCSS features.

Angular Material Landing Page

Template Name: Angular Material Smooth Scroll Bottom To Top.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; HTML, External CSS, and Angular CLI.
Angular is a popular JavaScript framework with a large number of communities and supports.&nbsp;<a href="../category/material-angular/" target="_blank" rel="noreferrer noopener" aria-label="Previously (opens in a new tab)">Previously</a>, we used angular material components to do something creative. So here we make Smooth Scroll Bottom To Top using angular material with CSS properties.
<div class="code-block code-block-4">&nbsp;</div>
In this component, we used mat-icons and Also, used function to make a scrollable. Here we used angular scroll behaviour in functions. Here we only modify the mat-icons font size and fixed the position of icons on the bottom-right side.
Make it yours now by using it, downloading it and please share it.

Angular is a popular JavaScript framework with a large number of communities and supports. Previously, we used angular material components to do something creative. 

material-angular Posts