I'm practicing the use of Anuglar Material Design components. I have gone through the regular steps to add Angular Material using 'ng add #angular/material' and selected one of the themes and okayed other defaults.
Everything works well, except that the form inputs are not visible in any of the browsers. They become visible only after intuitively clicking on the screen, guessing where the input maybe present. When I focus out of the input, the input field disappears
//app module ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import {MatInputModule} from '#angular/material/input'
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatInputModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
//app component ts
import { Component, NgModule } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'ang-mat-design';
}
<!--no code added -->
<mat-form-field appearance = "fill">
<input matInput placeholder = "Input">
<mat-hint>Sample Hint</mat-hint>
</mat-form-field>
Related
I have got a problem with String Interpolation.
So I try to make string interpolation according to what the teacher does in the course of Angular
i am doing.
I have a server.component.ts file which is exactly what teacher does in the course.
import { Component } from "#angular/core";
#Component ({
selector: 'app-servers',
templateUrl: './server.component.html'
})
export class ServerComponent {
serverId = 10;
serverStatus = 'offline'
}
And then I try to put it on the server.component.html so it appeared on the browser:
<p>Server with ID {{ serverId }} is {{ serverStatus }}</p>
I have checked multiple times and it seems like I have exactly the same setting that the teacher showed in the course. He has it written in the browser, and I do not.
Here are my other "settings"
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
styles: [`
h1{
color: red
}
`]
})
export class AppComponent {
name = 'Wojtek';
}
**app.component.html
**
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Hellloo!!!!</h1>
<input type="text">
<p>{{ name }}</p>
<hr>
<app-success-alert></app-success-alert>
<app-warning-alert></app-warning-alert>
</div>
</div>
</div>
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { ServerComponent } from './server/server.component';
import { ServersComponent } from './servers/servers.component';
import { SuccessAlertComponent } from './success-alert/success-alert.component';
import { WarningAlertComponent } from './warning-alert/warning-alert.component';
#NgModule({
declarations: [
AppComponent,
ServerComponent,
ServersComponent,
SuccessAlertComponent,
WarningAlertComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Also the thing is with implements OnInit in the export class line, in the course it works, however in my VSCode it does not really want to, any ideas?
Please it you may help me I would be really grateful!
I have tried to watch multiple youtube videos, also I came back to the course to rewatch it
It looks like your are missing the server-component in your app-component template. Put <app-servers></app-servers> somewhere in your app-component template.
i want to use Ckeditor and Ckfinder thgother in angular .
i u use by this way :
Module :
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { BrowserModule } from '#angular/platform-browser';
import { CKEditorModule } from '#ckeditor/ckeditor5-angular';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
CKEditorModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
and this is my component :
import { Component, OnInit } from '#angular/core';
import * as ClassicEditor from '#ckeditor/ckeditor5-build-classic';
import CKFinder from '#ckeditor/ckeditor5-ckfinder/src/ckfinder';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
public Editor = ClassicEditor;
ngOnInit(): void {
ClassicEditor
.create(document.querySelector('#editor'), {
plugins: [CKFinder],
// Enable the "Insert image" button in the toolbar.
toolbar: ['uploadImage' ],
ckfinder: {
// Upload the images to the server using the CKFinder QuickUpload command.
uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
}
});
}
}
and this is Html Code :
<ckeditor [editor]="Editor" [config]="{ toolbar: [ 'heading','ckfinder', '|', 'bold', 'italic' ] }"
data="<p>Hello, world!</p>"></ckeditor>
but it show me this error:
Uncaught CKEditorError: ckeditor-duplicated-modules
whats the problem ? how can i use the Ckfinder in angular ?
You can use the official CK Editor 5 Angular component.
Documentation: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html
GitHub:
https://github.com/ckeditor/ckeditor5-angular
You can create a custom build using Online Builder tool with all the required plugins and then import that build in angular.
I have been using the custom build with custom plugins without any issues.
I want to pass a variable from one component to another and I'm using #input
This is my parent component :
#Component({
selector: 'aze',
templateUrl: './aze.component.html',
styleUrls: [('./aze.component.scss')],
providers: [PaginationConfig],
})
export class azeComponent implements OnInit {
public hellovariable: number = 100;
}
This is the template of the parent component:
<app-my-dialog [hellovariable]="hellovariable"></app-my-dialog>
This is my child component :
#Component({
selector: 'app-my-dialog',
templateUrl: './my-dialog.component.html',
styleUrls: ['./my-dialog.component.css']
})
export class MyDialogComponent implements OnInit {
#Input() hellovariable: number;
constructor() { }
ngOnInit() {
console.log(hellovariable);
}
This is the child template:
<h3>Hello I am {{hellovariable}}<h3>
And this is the app.module.ts:
#NgModule({
declarations: [
AppComponent,
MyDialogComponent
],
entryComponents: [
MyDialogComponent
],
imports: [
BrowserModule,
routing,
NgbModule,
BrowserAnimationsModule,
ToastrModule.forRoot(),
RichTextEditorAllModule,
FullCalendarModule,
NgMultiSelectDropDownModule.forRoot(),
LeafletModule.forRoot(),
NgxGalleryModule,
HttpClientModule,
MatDialogModule,
ReactiveFormsModule
],
When I show my parent component template I get this error:
Can't bind to 'hellovariable' since it isn't a known property of 'app-my-dialog'.
Any idea on how to fix this?
Few thing to try
First make sure you have import Input into your component
import { Component, Input } from '#angular/core';
Then follow pascal convention when naming class
export class azeComponent implements OnInit
should change to
export class AzeComponent implements OnInit
Then register your component into your module declarations
Also import BrowserModule into your module also something like this
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent,
MyDialogComponent,
AzeComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Mostly you'll get this error because you forgot to declare the component into your app.module.ts or did it wrong
app.module.ts
import { YourSpecificComponent } from './components/measureUnit/measure-unit-monthly/measure-unit-monthly.component';
#NgModule({
declarations: [
AppComponent,
MessageComponent,
DashboardComponent,
.....,
YourSpecificComponent, // declared here
}
your-specific.component.ts
#Component({
selector: 'app-your-specific', // your selector
templateUrl: './your-specific.component.html',
styleUrls: [
'../some.css'
]
})
export class YourSpecificComponent implements AfterContentInit {
.....
ok this error causes because you need to import MyDialogComponent in azeComponent's module.
I have a form which allows me to create a new record or update an existing one. Right now the text of the button is submit. Based on if I call the form with an optional parameter which in my case is the id of the record to edit I set my form mode as create or update. What I want is to be able to set the text displayed as either create or update but I have not found a way to change the text from my controller. I can set all field values and enable or disable the submit button but have not found a way to set the Text on button. Can this be done and if not is there a work around
In your ts file.
export class AppComponent {
buttontext="Create"
name = 'Angular';
}
In your HTML File
<button>{{buttontext}}</button>
You can change button text accordingly.In your functions
See here-https://stackblitz.com/edit/angular-wsxkz9
If you are looking for some other solution you have to create your own directive
CustomDirective.ts file
import { Directive, ElementRef, Input, Renderer2 } from '#angular/core';
#Directive({ selector: '[myHidden]' })
export class HiddenDirective {
constructor(public el: ElementRef,private renderer: Renderer2) {}
#Input() myHidden: boolean;
ngOnInit(){
// Use renderer to render the emelemt with styles
console.log(this.myHidden)
if(this.myHidden) {
this.renderer.setProperty(this.el.nativeElement, 'innerHTML', 'Create');
}
else{
this.renderer.setProperty(this.el.nativeElement, 'innerHTML', 'Delete');
}
}
}
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { HiddenDirective } from './customdirective';
#NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, HelloComponent,HiddenDirective ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
val="true";
name = 'Angular';
}
app.component.html
<hello name="{{ name }}"></hello>
<p>
Start editing to see some magic happen :)
</p>
<button [myHidden]="val"></button>
See this- https://stackblitz.com/edit/angular-ktf7e3
I'm following this Angular 4 tutorial:
https://youtu.be/z6qFqlwUxkQ?t=16m33s
And in that part of the video he has the following code:
View:
<input type="text" [(ngModel)]="name">
<p>{{ name }}</p>
Controller:
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = '';
}
It works for him but not for me, I'm not getting any compilation errors but the page is blank, I don't see an input field at all. Any idea why? I have the exact same code and am using Angular 4 also..
EDIT:
here's the contents of app.modue.ts:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Can you post code for app-module.ts
I suspect you are missing something inside #ngModule
Compare that to the video...
I suspect it's one of FormsModule or ReactiveFormsModule
haven't watched video... You'll probably be using FormsModule if it's a Hello World type scenario.
import {FormsModule, ReactiveFormsModule} from '#angular/forms';
NgModule({
....
imports: [ ...,
FormsModule,
ReactiveFormsModule]
....
})
export class AppModule {
}