I started to learn angular and quite possible this is a silly question but I appreciate your help
I have a component with two buttons and I try to address a new component once I click on one button using the id and routerLink but when I click the button I get an error in the explorer about:
"Error: Cannot match any routes. URL Segment: 'property-detail' "
If I remove the id settings in the html component and I enter the address in the explorer it goes to the right place but not with the id setting and clicking the button
in the app.module.ts I have created the routes and registered the new component "PropertyDetailComponent". Please, follow the code
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { BrowserModule } from '#angular/platform-browser';
import {HttpClientModule} from '#angular/common/http'
import {Routes, RouterModule} from '#angular/router';
import { AppComponent } from './app.component';
import { PropertyCardComponent } from './property/property-card/property-card.component';
import { PropertyListComponent } from './property/property-list/property-list.component';
import { NavBarComponent } from './nav-bar/nav-bar.component';
import { HousingService } from './services/housing.service';
import { AddPropertyComponent } from './property/add-property/add-property.component';
import { PropertyDetailComponent } from './property/property-detail/property-detail.component';
const appRoutes: Routes = [
{path:'', component: PropertyListComponent},
{path:'rent-property', component: PropertyListComponent},
{path:'add-property', component: AddPropertyComponent},
{path:'property-detail/:id', component: PropertyDetailComponent}
]
#NgModule({
declarations: [
AppComponent,
PropertyCardComponent,
PropertyListComponent,
NavBarComponent,
AddPropertyComponent,
PropertyDetailComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
RouterModule.forRoot(appRoutes)
],
providers: [
HousingService
],
bootstrap: [AppComponent]
})
export class AppModule { }
then, in the html component I have this code:
<div class="card">
<div class="card-img-wrapper">
<img class="card-img-top" src="assets/images/house_default.png" />
<ul class="list-inline text-center member-icons animate">
<li class="list-inline-item">
<button class="btn btn-primary" routerLink="/property-detail/{{property.Id}}"><i class="fa-solid fa-pen-to-square"></i></button>
</li>
<li class="list-inline-item">
<button class="btn btn-primary"><i class="fa-solid fa-address-book"></i></button>
</li>
</ul>
</div>
<div class="card-body p-2">
<h1>{{ property.Name }}</h1>
<h2>{{ property.Type }}</h2>
<h3>{{ property.Price }}</h3>
</div>
</div>
enter image description here
enter image description here
Regards,
Jose
Related
I'm facing below error while binding the form
cart.component.html
<h3>Cart</h3>
<p>
<a routerLink="/shipping">Shipping Prices</a>
</p>
<div class="cart-item" *ngFor="let item of items">
<span>{{ item.name }} </span>
<span>{{ item.price | currency }}</span>
</div>
<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()">
<div>
<label for="name">
Name
</label>
<input id="name" type="text" formControlName="name">
</div>
<div>
<label for="address">
Address
</label>
<input id="address" type="text" formControlName="address">
</div>
<button class="button" type="submit">Purchase</button>
</form>
cart.component.ts
import { Component } from '#angular/core';
import { FormBuilder } from '#angular/forms';
import { CartService } from '../cart.service';
#Component({
selector: 'app-cart',
templateUrl: './cart.component.html',
styleUrls: ['./cart.component.css']
})
export class CartComponent {
items = this.cartService.getItems();
checkoutForm = this.formBuilder.group({
name: '',
address: ''
});
constructor(
private cartService: CartService,
private formBuilder: FormBuilder,
) {}
onSubmit(): void {
// Process checkout data here
this.items = this.cartService.clearCart();
console.warn('Your order has been submitted', this.checkoutForm.value);
this.checkoutForm.reset();
}
}
error :
Failed to compile.
src/app/cart/cart.component.html:12:7 - error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'.
12 <form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()">
~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/cart/cart.component.ts:8:16
8 templateUrl: './cart.component.html',
~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component CartComponent.
just add into your app.module.ts
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
and under #NgModule
#NgModule({
imports: [
FormsModule,
ReactiveFormsModule,
I have this problem but i try some solutions in web but and i can't resolve it: Unknown custom element:
- did you register the component correctly? For recursive components, make sure to provide the "name" option.
The problem appears to be in those fils :
Please I need help as soon as possible
routes.js:
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../components/Home.vue";
import PostDetails from "../components/PostDetails.vue";
Vue.use(VueRouter);
const routes = [{
path: "/",
component: Home,
name: "Home"
},
{
path: "/post/:slug",
component: PostDetails,
name: "postDetails"
}
];
const router = new VueRouter({
routes: routes,
hashbang: false,
mode: "history"
});
export default router;
app.js:
import Vue from "vue";
import VueRouter from "vue-router";
require('./bootstrap');
window.Vue = require('vue');
Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.component('app-home', require('./AppHome.vue'));
import router from "./routes/routes.js";
const app = new Vue({
el: '#app',
vuetify,
render: h => h(App),
router: router,
});
AppHome.vue:
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default {
};
</script>
Home.vue:
<template>
<div class="container">
<div class="row my-4">
<div class="col-md-8">
<div class="card">
<div class="card-header">Articles</div>
<div
class="card-body"
:key="index"
v-for="(post, index) in posts.data"
>
<div class="media">
<img
:src="post.photo"
class="rounded img-fluid mr-2 shadow-sm"
alt=""
srcset=""
/>
<div class="media-body text-justify">
<router-link :to="post.path">
<h3>{{ index }}:{{ post.title }}</h3>
</router-link>
<p>
<span class="textdefaut">
{{ post.user.name }}
</span>
<span class="text-danger">
{{ post.added }}
</span>
</p>
<p class="lead text-justify">
{{ post.body.substr(0, 200) }}...
</p>
<hr />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
posts: {},
};
},
created() {
this.getPosts();
},
methods: {
getPosts() {
axios
.get("/api/posts")
.then((response) => {
console.log(response.data);
this.posts = response.data;
})
.catch((err) => console.log(err));
},
},
};
</script>
Post Details:
<template>
<div>
Posts details , This shows that the route is really working!!
<router-link to="/Home"><a>Back to the root</a></router-link>
</div>
</telpmate>
<script>
export default {
data () {
return {
message: 'Hoera!!!!'
};
}
};
</script>
If all of your Vuejs components (including AppHome.vue) are in /resources/js/components directory, you must change:
Vue.component('app-home', require('./AppHome.vue'));
by
Vue.component('app-home', require('./components/AppHome.vue'));
...in your app.js
Try to append .default option:
Vue.component('app-home', require('./components/AppHome.vue').default);
I'm bulding an app in Angular2 with visual studio 2015: There are two buttons in the main page that both give a same popup window. Everything worked good until I decided to make a separate component for this modal. So buttons stay still in main page and modal is now in another component. But now I got the error :Cannot read property 'show' of undefined! on my show function.
Here is modal.component.ts:
import { Component, OnInit, ViewChild } from '#angular/core';
import { ModalDirective } from 'ngx-bootstrap/modal';
#Component({
selector: 'app-info-modal',
templateUrl: './info-modal.component.html',
styleUrls: ['./info-modal.component.scss']
})
export class InfoModalComponent implements OnInit {
#ViewChild('lgModal') public lgModal:ModalDirective;
constructor() { }
ngOnInit() {
}
showInfoModal = () => {
this.lgModal.show();
};
}
Here is modal.component.html:
<div bsModal #lgModal="bs-modal" [config]="{backdrop: 'static'}" 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">
<h2 class="modal-title pull-left">what is it about?</h2>
<button type="button" class="close pull-right" (click)="lgModal.hide()" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>content of the window.....</p>
</div>
</div>
</div>
</div>
The button in main page component html:
<button class="btn-default btn pull-right next" (click)="showModal()"> privacy <i class="fa fa-fw fa-chevron-right"></i></button>
Homepage component.ts:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
constructor(){
}
ngOnInit() {
}
showModal() {
this.infoModal.showInfoModal();
}
Do anyone has any idea? I don't know where I made mistake!
You should be using the below for your ViewChild reference
#ViewChild(ModalDirective) public lgModal:ModalDirective;
Update 1 : Based on revised question
You are missing the infoModal refernce as below,
export class HomeComponent implements OnInit {
#ViewChild(InfoModalComponent) infoModal : InfoModalComponent; ////// missing declaration
ngOnInit() {
}
showModal() {
this.infoModal.showInfoModal();
}
Note : As you are using this.infoModal you need to declare it as above, else you can use them in the HTML itself as
<button class="btn-default btn pull-right next" (click)="infoModal.showInfoModal()">
Show Information
</button>
<app-info-modal #infoModal> </app-info-modal>
I have a Laravel 5.4 project.
I have created two components : Students.vue and Student.vue component
Students.vue get all the students and Student.vue the markup for one display of a student
here is my Students.vue
<template>
<div v-if = "students.length && meta">
<pages :pagination = "meta"></pages>
<div class = "col-lg-3 col-sm-6 col-md-4 music_genre" v-for = "student in students">
<student :student = "student"></student>
</div>
</div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import eventHub from '../../events.js'
export default {
methods: {
...mapActions({
getStudents: 'student/getStudents'
})
},
computed : {
...mapGetters ({
students : 'student/students',
meta : 'student/meta'
})
},
mounted() {
this.getStudents(1)
}
}
</script>
here is my Student.vue
<template>
<div class="">
<div class="team-info ">
<h4>
<a href="#">
{{student.name}} {{student.last_name}}
</a>
</h4>
<span class='team-member-edit'>
<i class='fa fa-pencil icon-xs'></i>
</span>
</div>
<p>Along with studies, is good in all around activities held in the university events.</p>
</div>
</template>
<script>
export default {
props:['student'],
mounted() {
}
}
</script>
When i click on the Student Name, I would like to display all the details of the student. How to achieve that
I assume you have a key differentiating each students, hence you can do this
'/students/:id': {
component: 'student'
}
I have a problem I can't solve trying to use redux-form. I'm trying the Erikras boilerplate. I want the form to be a component and the parent to call handleSubmit (for the moment with a console.log just to confirm it works). Here, the two:
import React, {Component, PropTypes} from 'react';
import Helmet from 'react-helmet';
import {initialize} from 'redux-form';
import {connect} from 'react-redux';
import * as membersActions from 'redux/modules/members';
import {isLoaded, loadMembers} from 'redux/modules/members';
import { DashboardList } from 'components';
import { DashboardHeader } from 'components';
import { DashboardAdding } from 'components';
import { asyncConnect } from 'redux-async-connect';
#asyncConnect([{
deferred: true,
promise: ({store: {dispatch, getState}}) => {
if (!isLoaded(getState())) {
return dispatch(loadMembers());
}
}
}])
#connect(
state => ({
members: state.members.data,
error: state.members.error,
loading: state.members.loading
}),
{...membersActions, initialize })
export default class Dashboard extends Component {
static propTypes = {
initialize: PropTypes.func.isRequired,
members: PropTypes.array,
loadMembers: PropTypes.func.isRequired
}
handleSubmit = (data) => {
console.log(data);
this.props.initialize('dashAdding', {});
}
handleInitialize = () => {
this.props.initialize('dashAdding', {
pseudo: 'Pibo',
email: 'pibirino#gmail.com'
});
}
render() {
const {members} = this.props;
return (
<div className="container">
<h1>Dashboard</h1>
<Helmet title="Dashboard"/>
<DashboardHeader />
<div>
<DashboardList members={members}/>
<h3>Ici commence le form</h3>
<div style={{textAlign: 'center', margin: 15}}>
<button className="btn btn-primary" onClick={this.handleInitialize}>
<i className="fa fa-pencil"/> Initialize Form
</button>
</div>
</div>
<DashboardAdding onSubmit={this.handleSubmit}/>
<p>Bleeeeah!!</p>
</div>
);
}
}
and here the child:
import React, {Component, PropTypes} from 'react';
import {reduxForm} from 'redux-form';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import memberValidation from './memberValidation';
#reduxForm({
form: 'dashAdding',
fields: ['pseudo', 'email'],
validate: memberValidation
})
export default class DashboardAdding extends Component {
static propTypes = {
fields: PropTypes.object.isRequired,
handleSubmit: PropTypes.func.isRequired,
resetForm: PropTypes.func.isRequired
}
render() {
const {
fields: { pseudo, email},
handleSubmit,
resetForm
} = this.props;
const renderInput = (field, label) =>
<div className={'form-group' + (field.error && field.touched ? ' has-error' : '')}>
<label htmlFor={field.name} className="col-sm-2">{label}</label>
<div className={'col-sm-8 '}>
<input type="text" className="form-control" id={field.name} {...field}/>
</div>
</div>;
return (
<div>
<form className="form-horizontal" onSubmit={handleSubmit}>
{renderInput(pseudo, 'Full Name')}
{renderInput(email, 'Email', true)}
<div className="form-group">
<div className="col-sm-offset-2 col-sm-10">
<button className="btn btn-success" onClick={handleSubmit}>
<i className="fa fa-paper-plane"/> Submit
</button>
<button className="btn btn-warning" onClick={resetForm} style={{marginLeft: 15}}>
<i className="fa fa-undo"/> Reset
</button>
</div>
</div>
</form>
</div>
);
}
}
So... it doesn't work I think I'm missing some important knowledge. I thought that the reason is because the form component is dumb, and it doesn't have the dispatch function. So, I tryed to add this (several times in several different ways) importing the action creator from the specific folder:
#connect(() => ({}),
dispatch => actionCreators( dispatch)
)
But I don't still get what I want. What's the problem?
So, finally I found the answer by myself. In fact, I decided to not use #connect, whitch is deprecated (despite it's still used in the boilerplate) and to use connect, as in the example of the redux-form documentation. The only change concerned the parent, but I'll post them both in case I missed something. The following code works good.
Here is the code:
import React, {Component, PropTypes} from 'react';
import Helmet from 'react-helmet';
import {initialize} from 'redux-form';
import {connect} from 'react-redux';
import * as membersActions from 'redux/modules/members';
import {isLoaded, loadMembers} from 'redux/modules/members';
import { DashboardList } from 'components';
import { DashboardHeader } from 'components';
import { DashboardAdding } from 'components';
import { asyncConnect } from 'redux-async-connect';
#asyncConnect([{
deferred: true,
promise: ({store: {dispatch, getState}}) => {
if (!isLoaded(getState())) {
return dispatch(loadMembers());
}
}
}])
class Dashboard extends Component {
static propTypes = {
members: PropTypes.array,
error: PropTypes.string,
loading: PropTypes.bool,
addMember: PropTypes.func,
initialize: PropTypes.func.isRequired,
newMemberData: PropTypes.object
}
handleSubmit = (data, dispatch) => {
dispatch(addMember(JSON.stringify(data)));
this.props.initialize('dashboardForm', {});
}
handleInitialize = () => {
this.props.initialize('dashboardForm', {
pseudo: 'Pibo',
email: 'pibirino#gmail.com'
});
}
render() {
const {members} = this.props;
return (
<div className="container">
<h1>Dashboard</h1>
<Helmet title="Dashboard"/>
<DashboardHeader />
<div>
<DashboardList members={members}/>
<h3>Ici commence le form</h3>
<div style={{textAlign: 'center', margin: 15}}>
<button className="btn btn-primary" onClick={this.handleInitialize}>
<i className="fa fa-pencil"/> Initialize Form
</button>
</div>
</div>
<DashboardAdding onSubmit={this.handleSubmit}/>
</div>
);
}
}
function mapStateToProps(state) {
return {
members: state.members.data,
error: state.members.error,
loading: state.members.loading,
newMemberData: state.addSingleMember.data
};
}
function matchDispatchToProps(dispatch) {
return bindActionCreators({
addActions,
initialize: initialize
}, dispatch);
}
export default connect(mapStateToProps, matchDispatchToProps)(Dashboard);
...and the child component:
import React, {Component, PropTypes} from 'react';
import {reduxForm} from 'redux-form';
import memberValidation from './memberValidation';
class DashboardAdding extends Component {
static propTypes = {
fields: PropTypes.object.isRequired,
handleSubmit: PropTypes.func.isRequired,
resetForm: PropTypes.func.isRequired
}
render() {
const {
fields: { pseudo, email},
handleSubmit,
resetForm
} = this.props;
const renderInput = (field, label) =>
<div className={'form-group' + (field.error && field.touched ? ' has-error' : '')}>
<label htmlFor={field.name} className="col-sm-2">{label}</label>
<div className={'col-sm-8 '}>
<input type="text" className="form-control" id={field.name} {...field}/>
{field.error && field.touched && <div className="text-danger">{field.error}</div>}
</div>
</div>;
return (
<div>
<form className="form-horizontal" onSubmit={handleSubmit.bind(this)}>
{renderInput(pseudo, 'Pseudo')}
{renderInput(email, 'Email', true)}
<div className="form-group">
<div className="col-sm-offset-2 col-sm-10">
<button className="btn btn-success" onClick={handleSubmit}>
<i className="fa fa-paper-plane"/> Submit
</button>
<button className="btn btn-warning" onClick={resetForm} style={{marginLeft: 15}}>
<i className="fa fa-undo"/> Reset
</button>
</div>
</div>
</form>
</div>
);
}
}
export default reduxForm({
form: 'dashboardForm',
fields: ['pseudo', 'email'],
validate: memberValidation,
asyncBlurFields: ['email']
})(DashboardAdding);
The addMember function contains obviously a promise.
I hope it will helps somebody :-)