i used angular 2 in asp mvc 5
when i use this code , it work and not have problem .
app.module :
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
#NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component :
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: '<h1>My First App</h1>'
})
export class AppComponent {
}
and in header :
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
<base href="/" />
<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/reflect-metadata/Reflect.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="/systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
this code is work . it show me in view : My First App .
but when i used this code it show me error : Error
i used this code :
app.module :
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { OtherComponent } from './other/other.component';
#NgModule({
imports: [BrowserModule],
declarations: [AppComponent, OtherComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component :
import { Component } from '#angular/core';
import { OtherComponent } from './other/other.component';
#Component({
selector: 'my-app',
template: `<h1>My First App</h1>
<other-app></other-app>
`
})
export class AppComponent {
}
other.component :
import { Component , OnInit } from '#angular/core';
#Component({
selector: 'other-app',
templateUrl: 'app/other/other.component'
})
export class OtherComponent implements OnInit {
Constractor() { }
ngOnInit(){ }
}
other.component.html :
<div class="panel panel-default">
<div class="panel-body">
{{name}}
</div>
</div>
whats the problem ? how can i solve this problem ?
add .html format in templateUrl: 'app/other/other.component'
'app/other/other.component.html'
Related
Scenario:
I'm using directives from ng-matero for DateTime and using Angular Material for overall designing my application. Overall the functionality works fine. However angular material theme doesn't get apply on the dateTimepicker element as shown
Code
My app.module.ts file looks like this
import { HttpClientModule } from '#angular/common/http';
import { NgModule } from '#angular/core';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MaterialModule } from './material.module';
import { SearchComponent } from './components/search/search.component';
import { JourneysListComponent } from './components/journeys-list/journeys-list.component';
import { FlexLayoutModule } from '#angular/flex-layout';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { MtxDatetimepickerModule } from '#ng-matero/extensions/datetimepicker';
import { MtxNativeDatetimeModule } from '#ng-matero/extensions/core';
#NgModule({
declarations: [
AppComponent,
SearchComponent,
JourneysListComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
MaterialModule,
FlexLayoutModule,
BrowserAnimationsModule,
MtxDatetimepickerModule,
MtxNativeDatetimeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
HTML
<div class="login-wrapper" fxLayout="row" fxLayoutAlign="center center">
<mat-card class="box">
<mat-card-header>
<mat-card-title>Planner</mat-card-title>
</mat-card-header>
<form class="example-form">
<mat-card-content>
<mat-form-field class="example-full-width">
<input matInput placeholder="Origin" matInput required>
</mat-form-field>
<mat-form-field class="example-full-width">
<input matInput placeholder="Destination" matInput required>
</mat-form-field>
<mat-form-field class="example-full-width">
<mat-placeholder>Date & Time</mat-placeholder>
<mtx-datetimepicker #datetimePicker
[type]="type"
[mode]="mode"
[multiYearSelector]="multiYearSelector"
[startView]="startView"
[twelvehour]="twelvehour"
[timeInterval]="timeInterval"
[touchUi]="touchUi"
[timeInput]="timeInput"></mtx-datetimepicker>
<input [mtxDatetimepicker]="datetimePicker" [formControl]="datetime" matInput required>
<mtx-datetimepicker-toggle [for]="datetimePicker" matSuffix></mtx-datetimepicker-toggle>
</mat-form-field>
</mat-card-content>
<button mat-stroked-button color="accent" class="btn-block">Search</button>
</form>
</mat-card>
</div>
TS
import { Component, OnInit } from '#angular/core';
import {MtxCalendarView,MtxDatetimepickerMode,MtxDatetimepickerType} from '#ng-matero/extensions/datetimepicker';
import { MTX_DATETIME_FORMATS } from '#ng-matero/extensions/core';
import { UntypedFormControl } from '#angular/forms';
#Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.scss'],
providers: [
{
provide: MTX_DATETIME_FORMATS,
useValue: {
parse: {
dateInput: 'YYYY-MM-DD',
monthInput: 'MMMM',
yearInput: 'YYYY',
timeInput: 'HH:mm',
datetimeInput: 'YYYY-MM-DD HH:mm',
},
display: {
dateInput: 'YYYY-MM-DD',
monthInput: 'MMMM',
yearInput: 'YYYY',
timeInput: 'HH:mm',
datetimeInput: 'YYYY-MM-DD HH:mm',
monthYearLabel: 'YYYY MMMM',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
popupHeaderDateLabel: 'MMM DD, ddd',
},
},
},
],
})
export class SearchComponent implements OnInit {
type: MtxDatetimepickerType = 'datetime';
mode: MtxDatetimepickerMode = 'auto';
startView: MtxCalendarView = 'month';
multiYearSelector = false;
touchUi = false;
twelvehour = false;
timeInterval = 1;
timeInput = true;
datetime = new UntypedFormControl();
constructor() { }
ngOnInit(): void {
}
}
Question
Do I need to set theme exclusively for mtx-datetimepicker? if yes, How could I do that?
After import modules, you must define a theme.
#use '#ng-matero/extensions' as mtx;
#include mtx.all-component-themes($theme);
I have added the following classes to elements as follows:
import Link from "next/link";
import React from "react";
const Page = () => {
return (
<div>
<h1 className="notes-header">Index Page</h1>
<Link href="./notes">
<a className="notes-home">Notes</a>
</Link>
</div>
);
};
export default Page;
Next, I added styling to my element as follows
.notes-header {
font-size: 100px;
}
.notes-home {
font-size: 28px;
}
Lastly, I created a _app.js file and imported the global css file as shown below:
import React from "react";
import "../styles/globals.css";
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
The problem is my styles don't get applied to my selected elements. What I'm I getting wrong?
I'm not sure if I found a bug or if my configuration is off. My other components render and look like they're supposed to. But material angular's button styles are not loading right.
I'm using material angular and the issue is with the raised button from here https://material.angular.io/components/button/overview
Here is my markup
<div class="nav-item">
<button class="mat-raised-button"
(click)="navToCreate()">
New Post
</button>
</div>
<div class="nav-item">
<button class="mat-raised-button" *ngIf="isLoggedIn === false" (click)="navToLogin()">
<i class="material-icons md-48">account_box</i>
<span>Login</span>
</button>
</div>
<div class="nav-item">
<button class="mat-raised-button" *ngIf="isLoggedIn === true" (click)="logOut()">
<i class="material-icons md-48">account_box</i>
<span>Logout</span>
</button>
</div>
And here is what they render as
Pic of buttons
My app.module is the following
import { BrowserModule } from '#angular/platform-browser';
import { HttpClientModule } from '#angular/common/http';
import { NgModule } from '#angular/core';
import { ReactiveFormsModule } from '#angular/forms';
import { FormsModule } from '#angular/forms';
import { AppRoutingModule } from './app-routing.module';
// Material components
import { MatFormFieldModule } from '#angular/material/form-field';
import { MatInputModule } from '#angular/material/input';
import { MatCardModule } from '#angular/material/card';
import { MatSnackBarModule } from '#angular/material/snack-bar';
import { MatSidenavModule } from '#angular/material/sidenav';
import { MatToolbarModule } from '#angular/material/toolbar';
import { MatTabsModule } from '#angular/material/tabs';
import { MatListModule } from '#angular/material/list';
import { MatButtonModule } from '#angular/material/button';
// Components
import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';
import { DiscussionCardComponent } from './components/discussion-card/discussion-card.component';
import { LoginComponent } from './components/login/login.component';
import { DiscussionDetailComponent } from './components/discussion-detail/discussion-detail.component';
import { SideMenuComponent } from './components/side-menu/side-menu.component';
import { DiscussionCreateComponent } from './components/discussion-create/discussion-create.component';
import { DiscussionDetailPageComponent } from './components/discussion-detail-page/discussion-detail-page.component';
import { TruncatePipe } from './pipes/truncate.pipe';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
DiscussionCardComponent,
LoginComponent,
DiscussionDetailComponent,
TruncatePipe,
SideMenuComponent,
DiscussionCreateComponent,
DiscussionDetailPageComponent,
],
imports: [
BrowserModule,
HttpClientModule,
AppRoutingModule,
ReactiveFormsModule,
FormsModule,
BrowserAnimationsModule,
MatFormFieldModule,
MatInputModule,
MatCardModule,
MatSnackBarModule,
MatSidenavModule,
MatToolbarModule,
MatTabsModule,
MatListModule,
MatButtonModule,
],
exports: [],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Any help is appreciated. Thank you
your error is the mat-raised-button part. It is not a class, it is a property of the button.
<button mat-raised-button> is correct, <button class="mat-raised-button"> is using a class
My app.component.html is as below, app-login is a Component
<app-login></app-login>
and If I write below code in login.component.scss
html, body{
height: 100% !important;
}
I get below style
html[_ngcontent-c3], body[_ngcontent-c3] {
height: 100% !important;
}
How do I target HTML from component, please suggest.
You can use Renderer2 to change the html and body style from component. For example:
import { Component, Renderer2 } from '#angular/core';
#Component({
selector: 'home',
templateUrl: './home.component.html',
styleUrls: [ './home.component.css' ]
})
export class HomeComponent {
name = 'Home';
constructor(private renderer: Renderer2) {
this.renderer.setStyle(document.body, 'background-color', 'yellow');
this.renderer.setStyle(ddocument.getElementsByTagName('html')[0], 'background-color', 'blue');
}
}
See my answer to a similar question here: https://stackoverflow.com/a/48718382/9262488
in Util - I am having
modal-dialog.component.ts
import {Component, Input, ViewChild, ViewContainerRef} from "#angular/core";
import {ModalDirective} from 'ng2-bootstrap/ng2-bootstrap';
#Component({
selector: 'custom-modal',
templateUrl: 'modules/util/template/modal-dialog.html',
exportAs: 'child' }) export class ModalDialogComponent {
#ViewChild('childModal') public childModal: ModalDirective;
public show(variant): void {
debugger
console.log(this.childModal);
this.childModal.show();
} }
modal-dialog.html
<div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1"
role="dialog" aria-labelledby="myLargeModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Large modal</h4>
</div>
<div class="modal-body">
...
</div>
</div>
</div> </div>
Util.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { HttpModule, Http } from '#angular/http';
import { ModalDialogComponent } from '../../util/components/modal-dialog.component';
#NgModule({
imports: [
CommonModule,
HttpModule,
ModalModule
],
exports: [
CommonModule,
],
providers: [
],
declarations: [
ModalDialogComponent
] }) export class UtilModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: UtilModule
};
} }
app.module.ts
import UtilModule.forRoot()
test.component.html
<div>
<custom-modal></custom-modal>
<button type="button" class="btn btn-primary (click)="c.show(variant)">open</button>
</div>
and in test.component.ts /* system-defined */
import { Component, OnInit, OnDestroy, ViewChild, Directive, NgModule, ViewContainerRef} from '#angular/core';
import { Router, ActivatedRoute, Params } from '#angular/router';
#Component({
templateUrl: 'modules/sample/template/sample-test.component.html' })
export class SampleTestComponent {
}
I am unable to load child html on parent (test)
Unhandled Promise
rejection: Template parse errors: 'custom-modal' is not a known
element:
1. If 'custom-modal' is an Angular component, then verify that it is part of this module.
2. If 'custom-modal' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '#NgModule.schemas' of this
component to suppress this message. ("