CODEWITHSUNDEEP
angularangular-materialangular6
mecab1995
mecab1995

Reputation: 171

Why my "Angular Material Components" Not Working?

I am new to Angular 6 and Angular Material I tried creating one example to check Angular Material in the index.html with an ASP.NET CORE 1.1 application but its not working. My code is as follows.

Index HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 6</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
      <my-app><h1>bacem</h1></my-app>

      <button mat-raised-button color="warn">Warn</button>
      <br />
      <div class="mat-app-background">
          <mat-slider></mat-slider>
      </div>

  </body>
</html>

App Component ts:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
    templateUrl: './index.html',
    styleUrls: ['./styles.scss']
})
export class AppComponent  { name = 'Angular'; }

App Module .ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AngMaterialModule } from './angmaterial';



@NgModule({
    imports: [BrowserModule ,BrowserAnimationsModule,
        AngMaterialModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]

})
export class AppModule { }

angmaterial .ts

import { MatButtonModule, MatSliderModule } from '@angular/material';
import { NgModule } from '@angular/core';

@NgModule({
    imports: [MatButtonModule, MatSliderModule],
    exports: [MatButtonModule, MatSliderModule]
})

export class AngMaterialModule { }

Result:

enter image description here

enter image description here

Upvotes: 1

Views: 7797

Answers (1)

core114
core114

Reputation: 5325

App Module .ts Should be a import your MatButtonModule, MatSliderModule

    import { MatButtonModule, MatSliderModule } from '@angular/material';

    import { NgModule } from '@angular/core';

     @NgModule({
       imports: [
        BrowserModule ,
        BrowserAnimationsModule,
        AngMaterialModule,
        MatButtonModule, 
        MatSliderModule],


    declarations: [AppComponent],

    bootstrap: [AppComponent]

})
export class AppModule { }

and remove your

angmaterial .ts to you include

MatButtonModule, MatSliderModule

you need to generate new component (ng g c yourcomponenetname)

and put your html code use component remove your code part in index.html

index.html

The main HTML page that is served when someone visits your site. Most of the time you'll never need to edit it. The CLI automatically adds all js and css files when building your app so you never need to add any or tags here manually.

The src folder

src

app

app.component.css

app.component.html

app.component.spec.ts

app.component.ts

app.module.ts

assets

.gitkeep

environments

environment.prod.ts

environment.ts

browserslist

favicon.ico

index.html

karma.conf.js

main.ts

polyfills.ts

styles.css

test.ts

tsconfig.app.json

tsconfig.spec.json

tslint.json

Your app lives in the src folder. All Angular components, templates, styles, images, and anything else your app needs go here. Any files outside of this folder are meant to support building your app.

you need to learn Anuar 6 QuickStart with Angualar-6

Upvotes: 4

Related Questions