Code Monkey home page Code Monkey logo

Comments (4)

Oripi avatar Oripi commented on May 28, 2024 2

for future generations, this worked for me:

// angular layout
<my-comp on-close-modal-clicked="$ctrl.onCancelModalClosing"></my-comp>

// angular comp.ts
// **note the arrow function to retain context**
export class AngComp {
	onCancelModalClosing = () => {
             this.isModalDisplayed = false;
         }
}

// react component:
import * as React from 'react';

interface IProps {
	onCloseModalClicked?: () => void;
}

export default class MyComp extends React.Component<IProps> {
	closeModalClicked?: IProps['onCloseModalClicked'];
	constructor(props) {
		super(props);
	}

	closeModal = () => {
		const closeModalClicked = this.props.onCloseModalClicked;
		closeModalClicked && closeModalClicked();
	};

	render() {
		return (<Button onClick={this.props.closeModalClicked} />);
	}
}

// react2angular link
import {react2angular} from 'react2angular';
import MyComp from './my-comp';

export const myComp = react2angular(MyComp, ['onCloseModalClicked']);

from react2angular.

moshfeu avatar moshfeu commented on May 28, 2024 1

@bcherny The fix url are not working. Can you fix it? Or supply the fix in a comment?
Thanks!

from react2angular.

bcherny avatar bcherny commented on May 28, 2024

Hi @pablote! This is an Angular issue, and is not related to React or react2angular.

I made a repro case to demonstrate: https://stackblitz.com/edit/react2angular-binding-issue-xyue5j?file=index.js.

The fix is to bind in your controller, not in your view. Otherwise every time the view is compiled you're generating a new function, so the scope gets re-digested. This is because in JavaScript:

let a = function() {}
a === a.bind(a) // false

See the fix here: https://stackblitz.com/edit/react2angular-binding-issue-pmetca?file=index.js.

from react2angular.

moshfeu avatar moshfeu commented on May 28, 2024

@bcherny never mind. I figured it out.
The answer is this stackoverflow's question

from react2angular.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.