0

There is very little to no documentation of this out there. In fact, I am starting to doubt ng2 and React can play together. But I'm no expert, so I need your help.

According to Material UI docs for the AppBar here This is the code to add it to your component

import React from 'react';
import AppBar from 'material-ui/AppBar';

/**
 * A simple example of `AppBar` with an icon on the right.
 * By default, the left icon is a navigation-menu.
 */
const AppBarExampleIcon = () => (
  <AppBar
    title="Title"
    iconClassNameRight="muidocs-icon-navigation-expand-more"
  />
);

export default AppBarExampleIcon;

Problem is, this is documentation for a React Component, not an Angular2 Component.

This is as far as I got in my Angular2 component with the little information that is out there:

  import { Component, OnInit } from '@angular/core';
  import { React } from 'react';
  import { AppBar } from 'material-ui';


  @Component({
      selector: 'app-toolbar',
      templateUrl: './toolbar.component.html',
      styleUrls: ['./toolbar.component.css']
  })
  export class ToolbarComponent implements OnInit {
      AppBarExampleIcon = `
          <AppBar title="Title" iconClassNameRight="muidocs-icon-navigation-expand-more" />
      `;
  constructor() { }

  ngOnInit() {
  }

}

This results in nothing.

Has anyone tried this before?

1 Answer 1

1

React and Angular cannot be mixed like that. Although both use the component syntax what is under the hood is completely different. Material-UI is a Material Design implementation specifically for React.

Try Angular Material instead, a Material Design implementation for Angular2. It's not as fully fleshed out like Material-UI (due to ng2 being newer) but there are still some components you should be able to use with a bit of modification - https://material.angular.io/components/component/toolbar

Sign up to request clarification or add additional context in comments.

1 Comment

I think I agree with you. Problem is Angular Material has flexbox issues in crossbrowsers. Materializing with Bootstrap may be a better alternative

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.