Leveraging angular2-material with systemjs for Angular2 development

After completing the TUTORIAL: TOUR OF HEROES on this link, I attempted to integrate angular2-material into my project. Unfortunately, I am having issues with the CSS not displaying correctly. Can anyone provide insight into what I may be missing or doing wrong?

You can view my systemjs configuration here.

In an attempt to resolve the CSS issue, I made the following changes in app.component.ts:

import {MD_LIST_DIRECTIVES} from '@angular2-material/list/list';

@Component({
  selector: 'my-app',
  template:
  ....
  directives: [HeroDetailComponent, MD_LIST_DIRECTIVES],
angulartypescriptangular-material

Answer №1

Ensure that you have imported all the necessary directives in your code, like this:

import {MD_CARD_DIRECTIVES} from '@angular2-material/card';
import {MdInput} from '@angular2-material/input';
import {MdCheckbox} from '@angular2-material/checkbox';

Check out the complete list of Angular2 Material Directives here

Answer №2

With the recent changes to angular2 and angular2 material's systemjs setup, I struggled to find reliable information online. However, after some exploration, I was able to figure it out.

First, make sure to download the latest version (2.1.2) of ng2 from the angular 2 quickstart repository. Then, add the following dependencies to your package.json file:

 "@angular/material": "^2.0.0-alpha.9-3",
 "@types/hammerjs": "2.0.33"

In your systemjs.config.js file, include the following mappings:

map: {
  // our app is within the app folder
  app: 'app',
    :
    '@angular/material': 'npm:@angular/material/material.umd.js',
    :

Next, update your app.module.ts file from:

@NgModule({
      imports:      [ BrowserModule],

to:

 @NgModule({
      imports:      [ BrowserModule, MaterialModule.forRoot()],

Don't forget to add any necessary CSS in your index.html file. For more detailed instructions, you can refer to https://github.com/Longfld/ng2QuickStartForBeginning

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you explain the purpose of the .json() function in Angular2?

Can you explain the purpose of the .json() function within http requests in Angular2? Here is an example code snippet: this.http.get('http://localhost:8080/getName') .subscribe(res => this.names = res.json()); Is it correct to assume that t ...

javascriptjsonangular

There is no correlationId found within the realm of node.js

Currently, I am in the process of implementing correlationId functionality using express-correlation-id. I am diligently following the guidelines provided on this page: https://www.npmjs.com/package/express-correlation-id. I have successfully imported the ...

node.jstypescriptexpressmiddleware

Saving a user with a BLOB avatar in Angular 5: Tips and Tricks for Success

As a newcomer to Angular, I am trying to figure out how to properly save a new user with an avatar. Can someone help me understand how to pass the Blob value of the avatar to my user Model for successful saving? Below is the code snippet I am working with ...

htmlangulartypescript

What is the method to make a String bold when sending it through a messaging service?

Here is the structure of my service: import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root', }) export class MessageService { messages: string[] = []; add(message: string) { this.messages.push(message); ...

htmlangulartypescriptservicecomponents

Angular template variables in VS Code now have the ability to automatically update their names when renamed

Here is a snippet from the controller: /* Local copies of Enumerators to use on template */ MeasurementOriginEnum: typeof MeasurementOriginEnum = MeasurementOriginEnum; And here is how it is used in the template: <button *ngIf="element.getMeasure ...

angularvisual-studio-code

Having trouble accessing @ViewChildren from the parent component

I've been facing an issue while attempting to control the child instances of a component and I can't seem to bypass this particular error. I've been referring to solutions provided on this specific thread. The main component Sequence houses ...

angulartypescriptangular-decorator

What is the best way to retrieve the object of the selected option from a single select input in Angular

I'm currently working with an array of objects that looks like this: let myArray = [{'id':1,'Name':"ABC"},{'id':2,'Name':"XYZ"}] I'm trying to retrieve object values based on a dropdown selection, but so ...

javascripthtmlangulartypescriptrxjs

Guide on properly setting up and configuring Cypress while using a proxy

After downloading the Cypress zip file and extracting it, I proceeded to run the npm installation command from within the e2e folder of my Angular project: npm install /path_to_cypress_folder/cypress/Cypress/resources/app The installation was successful a ...

angularwindowscypressnpm-install

How can you vertically center an icon button in Material UI?

Looking for help with aligning elements in this code snippet: <TextField id="outlined-basic" label="22Keyword" defaultValue={"test123"} variant="outlined" /> <IconButton aria-label="delete&q ...

cssreactjstypescriptmaterial-ui

Angular 8 template-driven form encountering a Minimum Length Error

Upon clicking the submit button, I encountered the following error: ERROR TypeError: Cannot read property 'minlength' of null I am unsure why this error is happening. How can I go about resolving this issue? Below is the code from app.componen ...

typescriptangular8

Removing AWS-CDK Pipelines Stacks Across Multiple Accounts

Currently, I am utilizing pipelines in aws-cdk to streamline the process of automating builds and deployments across various accounts. However, I have encountered an issue where upon destroying the pipeline or stacks within it, the respective stacks are ...

typescriptpipelineaws-cdk

Triggering a subsequent action in Ngrx depending on the data from the initial action

Currently, I am fetching a list of users using ngrx: this.users$ = this.store.select(fromReducer.getUsers); In my HTML template: <ul> <li *ngFor="let user of users$ | async"> {{user.id}} - {{user.name}} - {{user.email}} </ ...

angularngrxngrx-effects

Creating a progressive prototype chain in TypeScript: A step-by-step guide

With JavaScript, it is possible to create a "derived class" whose "base class" is dynamic using code like the following: function NewBaseClass(sF) { function DynamicBaseClass(iF) { this.instanceField = iF; } // EDIT: oops, this is not really static i ...

typescriptprototypal-inheritance

Having trouble adding @angular/fire to my Angular project

Having trouble adding Firebase authentication to my Angular project, specifically when running npm install @angular/fire. I keep encountering the following error: > npm ERR! code ERESOLVE > npm ERR! ERESOLVE unable to resolve dependency tree > ...

angular

What is the proper way to import the Database class from BetterSqlite3 in a TypeScript project?

I am currently working on code that utilizes better-sqlite3 and my goal is to convert it to typescript. The original javascript code includes the following relevant sections: import Database from "better-sqlite3"; /** * @param {string} filenam ...

typescripttypescript-typings

Interface displaying auto-detected car types

I have a setup that looks like this: interface ValueAccessor<T> { property: keyof T; getPropertyValue: (value: any) => value; } I am trying to figure out how to define the correct type and replace the any when I want to provide a custom ...

typescript

How can we utilize Typescript to check if the intern 4 page has finished loading?

I've managed to set up a function in intern 4 using TypeScript that waits for the page to load. However, there are instances where it doesn't work and throws a TimeOutError even when I catch the error within the function. Can someone please take ...

typescriptintern

The final value of a loop is consistently returned each time

Creating a loop to generate objects. Action.ts public campaing:any = { 'id': '', 'campaing_code': '', 'campaing_type': '', 'start_date': this.currentDate, 'end ...

angulartypescriptangular-material

When using Ionic 2 and Angular 2, a single click can trigger two events - one on the button itself and another on the element

Hey there, I am facing a bug while using Angular 2 on mobile (with Ionic 2) and despite my efforts, I cannot find any similar issue. Therefore, I could really use your help. The issue is with a textarea and an input element placed one above the other. Whe ...

angulareventsclickfocusionic2

The Ionic framework is encountering difficulties in resolving all parameters for the service

I have created an IncomeTempService: import {incomeService} from "./income.service"; export class incomeTempService { private incomeTmp: {value: number, usage: string, date: string}; private value = null; private usage = null; constructor(priva ...

angularionic-framework