Topic: Input not working in angular 4

badillo free asked 6 years ago

Hi all. I´m install MDB for Angular 4 with the following link : https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design. But the inputs not working, for example: placeholder over title or when I press input title not move. Thanks

Add comment

Adrian Sawicki free answered 6 years ago

0 0 Best answer

It looks like you copied something from mdb jQuery, not Angular. The reason why I'm writing this is that you hadn't use any angular directive. If you want to have your label jump up you have to use mdbActive directive. Check Angular docs for more information :).

badillo free commented 6 years ago

Good morning. It's right. I'll try as you say. Thank's.

badillo free commented 6 years ago

Hi Adrian. Now download mbd for angular, but at the moment of running the instruction (ng serve), Show me the following message. ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader !./~/sass-loader!./~/angular-bootstrap-md/scss/mdb.scss Module build failed: @import "./angular/mdb-angular-free"; ^ File to import not found or unreadable: ./angular/mdb-angular-free. Parent style sheet: stdin in C:\Users\Downloads\mdb-angular-free-4.3.0\node_modules\a ngular-bootstrap-md\scss\mdb.scss (line 64, column 1) @ ./~/angular-bootstrap-md/scss/mdb.scss 4:14-162 @ multi ./~/font-awesome/scss/font-awesome.scss ./~/angular-bootstrap-md/scss/b ootstrap/bootstrap.scss ./~/angular-bootstrap-md/scss/mdb.scss ./src/styles.scss Rewards.

Please insert min. 15 characters.

badillo free commented 6 years ago

Excuse me. I find solution: In mdb.scss change line @import "./angular/mdb-angular-free"; to @import "angular/mdb-angular"; Thanks

Add comment

badillo free answered 6 years ago

0 0 Best answer

Sorry but still not working. Now download here: https://mdbootstrap.com/angular/angular-bootstrap-getting-started/ And install with: https://mdbootstrap.com/angular/5min-quickstart/ But the effects on inpusts and buttons works Thanks

badillo free commented 6 years ago

Hi all. I solved the error. I wrote badly "mdbActive" change for "mdbActiv". Thanks.

Add comment

badillo free answered 6 years ago

0 0 Best answer

Hi, good morning. Thank's for you answer.

I test other way install angular with MDB but I see but I see the same result. The link: <a href="https://mdbootstrap.com/angular/5min-quickstart/">https://mdbootstrap.com/angular/5min-quickstart/</a>  . I followed the prerequisite steps and installation steps 1 to 4, but not work.

My code.
<h1>app.component.html:</h1>
<div class="row text-left">

<div class="col-md-3 mb-r">

<div class="card">
<div class="card-body">

<div class="text-center cyan-text">
<h3><i class="fa fa-lock cyan-text"></i> Login:</h3>
<hr class="my-4">
</div>

<div class="md-form">
<i class="fa fa-envelope prefix grey-text"></i>
<input type="text" id="cyanForm-email" class="form-control">
<label for="cyanForm-email">Your email</label>
</div>

<div class="md-form">
<i class="fa fa-lock prefix grey-text"></i>
<input type="password" id="cyanForm-pass" class="form-control">
<label for="cyanForm-pass">Your password</label>
</div>

<div class="text-center">
<button class="btn btn-info">Login</button>
</div>

</div>

<div class="modal-footer">
<div class="options">
<p>Not a member? <a href="#">Sign Up</a></p>
<p>Forgot <a href="#">Password?</a></p>
</div>
</div>

</div>

</div>
<h1>app.module.ts:</h1>
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

import { MDBBootstrapModule } from './typescripts/angular-bootstrap-md/free';
import { AgmCoreModule } from '@agm/core';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpModule,
MDBBootstrapModule.forRoot()
],
providers: [],
bootstrap: [AppComponent],
schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule { }

Thank's

Please insert min. 20 characters.

Hi, good morning. Thank's for you answer. I test other way install angular with MDB but I see but I see the same result. The link: https://mdbootstrap.com/angular/5min-quickstart/ . I followed the prerequisite steps and installation steps 1 to 4, but not work. My code.

app.component.html:

<div class="row text-left">  <div class="col-md-3 mb-r">  <div class="card"> <div class="card-body">  <div class="text-center cyan-text"> <h3><i class="fa fa-lock cyan-text"></i> Login:</h3> <hr class="my-4"> </div>  <div class="md-form"> <i class="fa fa-envelope prefix grey-text"></i> <input type="text" id="cyanForm-email" class="form-control"> <label for="cyanForm-email">Your email</label> </div> <div class="md-form"> <i class="fa fa-lock prefix grey-text"></i> <input type="password" id="cyanForm-pass" class="form-control"> <label for="cyanForm-pass">Your password</label> </div> <div class="text-center"> <button class="btn btn-info">Login</button> </div> </div>  <div class="modal-footer"> <div class="options"> <p>Not a member? <a href="#">Sign Up</a></p> <p>Forgot <a href="#">Password?</a></p> </div> </div> </div>  </div>

app.module.ts:

import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import { MDBBootstrapModule } from './typescripts/angular-bootstrap-md/free'; import { AgmCoreModule } from '@agm/core'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, FormsModule, HttpModule, MDBBootstrapModule.forRoot() ], providers: [], bootstrap: [AppComponent], schemas: [NO_ERRORS_SCHEMA] }) export class AppModule { } Thank's

Add comment

Adrian Sawicki free answered 6 years ago

0 0 Best answer